javascript - 如何根据光标的来源对元素执行操作

Question

我希望这个问题足够清楚，我想根据悬停该元素时光标的来源对元素做“事情”。例如，如果光标来自左侧，则使元素向右滑动，如果光标来自右侧，则向左滑动，如果光标来自底部，则滑动到顶部，如果光标来自顶部，则滑动到底部。我试着自己做，结果不太好，所以不要指望我展示我自己的任何东西，对不起。但我有一个例子给你： http: //pixelentity.com/

所以，请告诉我一种使用 jQuery 和/或 CSS3 的方法

Answer 1

您可以在它进入阻止的那一刻获得鼠标移动的方向。看例子http://jsfiddle.net/PNsd5/2/

获取鼠标方向的函数取决于 jsfiddle 表示的代码顶部的变量，如下所示：

function getMoveDir(){
    var direction = '';
    if ((disX <= 0) && (disY <= 0)){
        if (disX < disY) {
            direction = 'From right';
        } else {
            direction = 'From top';
        }
    }
    if ((disX >= 0) && (disY >= 0)) {
        if (disY > disX) {
            direction = 'from bottom';
        } else {
            direction = 'from left'
        }
    }
    return direction;
}

Answer 2

使用 jquery mouseenter 事件。

您当前显示的代码根据 mouseenter 位置执行不同的动画，然后计算偏移量。因此，您可以尝试计算 mouseenter 的位置，然后确定光标的来源。

然后，您无论如何都可以决定为图片设置动画。

你的辅助函数应该是mouseenter、offset、animate。如果您需要更多帮助，请告诉我。