Question

对不起，伙计们，这不仅仅是一个问题的答案。我见过很多人问如何使用js / jQuery识别定向鼠标移动，这是我今天下午给他们写的一个插件。

jQuery提供对标准JS鼠标事件以及一些自定义事件的支持。在jQuery中，很容易捕获鼠标点是否已经进入对象的边界或者是从（mouseenter，mouseleave）还是其他东西（如click，dblclick等）进入。但如果您需要捕捉鼠标的方向，则会遇到麻烦。如果有一个插件可以在你可以监听并绑定监听器例程的任何元素上触发自定义鼠标方向事件，那将是非常棒的。

我今天下午写了这个小插件（jQuery MouseDirection Plugin）来触发DOM结构中任何可见元素的八个自定义事件。这是源代码

/**
 * 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)

这是你如何使用它

<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>

为了避免每次运行检查的过度工作，是否鼠标已经进入提供的DOM元素（通过选择器），我已经将鼠标指针下的活动元素定位并仅在该对象上触发事件 - 这是一个巨大的性能提升:)

从下面的链接下载带有example.html的完整插件

Download jQuery Mouse Direction Plugin

:)享受！

jQuery鼠标方向插件

0 个答案: