CODEWITHSUNDEEP
javascripthtmlcss
Johnyb
Johnyb

Reputation: 1316

Mousemove with wrong position

I have created this little gallery with simple scaling effect based on position of mouse related to the center of image here it works very well but only if the contaienr has 100% width , if i change the width to 50% and margin in to the center it complety ruins the script as seen here What causes this unwanted behaviot of position of mouse? I am calculating the distance with basic vectors operation e.g

 function calculateDistance(elem, mouseX, mouseY) {
        return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offsetLeft + (elem.offsetWidth / 2)), 2) + Math.pow(mouseY - (elem.offsetTop + (elem.offsetHeight / 2)), 2)));
    }

Upvotes: 1

Views: 101

Answers (1)

Johan Karlsson
Johan Karlsson

Reputation: 6476

The second version doesnt take the margin into consideration. In the first example the margin is 0 and thus not needed, try this:

function calculateDistance(elem, mouseX, mouseY) {
    return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offsetLeft + nav.offsetLeft + (elem.offsetWidth / 2)), 2) + Math.pow(mouseY - (elem.offsetTop + (elem.offsetHeight / 2)), 2)));
}

Check it out: https://jsfiddle.net/caeth/gj221c1r/2/

Upvotes: 1

Related Questions