Sorry, it's more of an answer than a question. I've seen many people asking how to identify directional mouse movements using js/jQuery and this is a plugin I wrote for them this afternoon.
jQuery provides support for standard JS mouse events as well as some custom ones. In jQuery it's easy to capture whether mouse point has entered in the boundary of an object or left from (mouseenter, mouseleave) or something else happened (like click, dblclick etc). But you are in trouble if you need to capture the direction of your mouse. And it would be fantastic if there was a plugin which can fire custom mouse-direction event on any elements which you can then listen to and bind a listener routine.
I wrote this small plugin (jQuery MouseDirection Plugin) this afternoon to trigger eight custom event for any visible element in the DOM structure. Here is the source code
/**
* jQuery Mouse Direction Plugin
* @version: 1.1
* @author Hasin Hayder [hasin@leevio.com | http://hasin.me]
*/
(function ($) {
var options = {};
var oldx = 0;
var oldy = 0;
var direction="";
$.mousedirection = function (opts) {
var defaults = {
};
options = $.extend(defaults, opts);
$(document).bind("mousemove", function (e) {
var activeElement = e.target || e.srcElement;
if (e.pageX > oldx && e.pageY > oldy) {
direction="bottom-right";
}
else if (e.pageX > oldx && e.pageY < oldy) {
direction="top-right";
}
else if (e.pageX < oldx && e.pageY < oldy) {
direction="top-left";
}
else if (e.pageX < oldx && e.pageY > oldy) {
direction="bottom-left";
}
else if (e.pageX > oldx && e.pageY == oldy) {
direction="right";
}
else if (e.pageX == oldx && e.pageY > oldy) {
direction="down";
}
else if (e.pageX == oldx && e.pageY < oldy) {
direction="up";
}
else if (e.pageX < oldx && e.pageY == oldy) {
direction="left";
}
$(activeElement).trigger(direction);
$(activeElement).trigger({type:"mousedirection",direction:direction});
oldx=e.pageX;
oldy=e.pageY;
});
}
})(jQuery)
An here is how you can use it
<head>
<title>jQuery Mouse Direction Plugin Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.mousedirection.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.container {
height: 150px;
margin: 20px;
padding: 20px;
width: 300px;
border: 1px solid #888;
}
</style>
<body>
<div class="container">
Move your mouse over this box
</div>
<script type='text/javascript'>
$(function () {
$.mousedirection();
$(".container").bind("mousedirection", function (e) {
$(this).html("Mouse Direction: <b>"+e.direction+"</b>");
});
});
</script>
</body>
To save from the overwork of running a check every time whether the mouse has entered on the supplied DOM elements (via selectors) I have located the active element under the mouse pointer and triggered the event only on that object - this was a huge performance boost :)
Download the complete plugin with the example.html from the link below
来源：https://stackoverflow.com/questions/8575951/jquery-mouse-direction-plugin