1

是否有可能鼠标在不同方向上的移动会触发不同的动作？

例如，如果我将鼠标移到左侧的 div 上，则 div 背景颜色变为红色。向右移动 - 蓝色背景，向上 - 绿色，向下 - 黑色。

那么是否有类似这样的事件 - 类似于 onmouseenter、onmouseleave、onmousemove 的事件......？

或者有人可以为此编写一个函数吗？

编辑：

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

$(function () {
        $.mousedirection();
        $(".container").bind("mousedirection", function (e) {
            $(this).html(""+e.direction+"");
        });
    });

这是完美运行的功能（在此处查看实际操作：http: //jsfiddle.net/Dv29e/100/），但我不知道如何实现更改 div 背景颜色 - 它当前更改显示的文本（左，右等...），我不需要任何文字，我需要背景颜色。

有人可以编辑这段代码来实现这一点吗？我自己尝试过，但无法正常工作。

edit2 - 通过 make3 解决

4

1 回答 1

1

这个插件看起来像你想要的。

于 2013-08-05T18:13:32.163 回答