(function() {
var mX, mY, distance,
$distance = $('#distance span'),
$element = $('#element');
function calculateDistance(elem, mouseX, mouseY) {
return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left+(elem.width()/2)), 2) + Math.pow(mouseY - (elem.offset().top+(elem.height()/2)), 2)));
}
$(document).mousemove(function(e) {
mX = e.pageX;
mY = e.pageY;
distance = calculateDistance($element, mX, mY);
$distance.text(distance);
});
})();
This code will calculate the distance between the mouse cursor and the center of an element. This can be useful for triggering a function when the mouse is within a certain distance of an element. Or, you can base the value of a property, such as the width, height, or opacity of the element, on the proximity of the mouse cursor.
In this case the point 0 is the center of the element.
How would the point be 0 anywhere in the element?
That is, the edge of the element takes away a = 0
Thanks for this post – this makes life really easy.
Hi,
I was working with jquery for last 3 months.. I am well acquainted working with functionality but never tried to write a plug in… just started experimenting with above functionality.. coded as below..
doing so gives me an error
where am I going wrong?
You attached it to to the jQuery object (
$.fn.calculateDistance
) so you’ll have to call it like$.calculateDistance
.Or just don’t attach it like that. Different schools of thought on that. Since your function requires jQuery internally might be good to leave it like that.
in the code you have added calculate distance is not a plain function. Its a jquery function, so you have to call it as such.
$.calulateDistance($element, mX, mY);
hi, I was wondering if it possible to move the element center to the current mouse position. any suggestions pls.
http://codepen.io/sonar/pen/tABGL?editors=001
In that example i want to move the circle to the position(means i want the center of circle to at the cursor position) where the cursor is currently present when i hover it.
Can u please help me in solving the problem..
Thanks
I was trying to use this code to make something rather special. A div calculating height until mouse position in combination with rotating. No luck so far, but if you have any ideas, feel free to share :)
codepen can be found here:
See the Pen Afxlz(@sugomi) on CodePen.
Does this work even if you have scrolled down the page? because I would think x and y would not stay consistent to offset as you scroll.
Hi…There is a cool cursor effect where a fox icon moves in the direction of cursor as if it is looking at cursor …
It’s a chrome extension, you can see it on welcome page ones you install the extension
I just want to know how it is done.
Hey guys. Just in case someone will want to try it our with pure JS.
(function() {
const counter = document.createElement(‘div’);
counter.id = “distance-counter”;
counter.style = “position: fixed; width: 100px; height: 50px; background: black; color: green; top: 20%; left: 0;”
document.body.appendChild(counter);
})();