javascript - 鼠标悬停时根据方向翻转图像

Question

有没有办法让这个脚本根据指针的方向切换图像？

例如，如果您有一条鱼，并且将鼠标移到鱼的右侧，它会切换到面向该方向的图像。当您将指针移到鱼的左侧时，它会指向另一个方向。

演示

JAVASCRIPT

$("#foo").mousemove(function(event) {
    $("#bee1").stop().animate({left: event.pageX, top: event.pageY}, 300)
});

HTML

<div id="foo">
<div id="bee1">MoveMe</div>
</div>

CSS

#foo{
  height:500px;
  width:400px;
}
#bee1{
  position:absolute;
  border:1px solid #ccc;
}

Answer 1

$("#foo").mousemove(function(event) {
        var bee = $("#bee1");
        var position = bee.position();
        var mousey = event.pageX;


    if(position.left > mousey) {
        $("#bee1").html("left");
    } else {
        $("#bee1").html("right");
    }

        $("#bee1").stop().animate({left: event.pageX, top: event.pageY}, 300);
});

Answer 2

只需检查当前鼠标位置 x 是否大于图像位置并src相应地更改图像：

$("#foo").mousemove(function(event) {
    var mousePos = {x: event.pageX, y: event.pageY},
        elPos = imgEl.offset();
    if(mousePos.x > elPos.left){
        direction = '-->';
    }
    else{
        direction = '<--';
    }
    imgEl.text(direction);
    imgEl.stop().animate({left: event.pageX, top: event.pageY}, 300)
});

http://jsfiddle.net/WfQwZ/