javascript - 方向に基づいてマウスオーバーで画像を反転

Question

ポインターの方向に基づいて、このスクリプトで画像を切り替える方法はありますか?

たとえば、魚がいて、マウスを魚の右側に移動すると、その方向を向いた画像に切り替わります。ポインターを魚の左側に移動すると、反対方向を指します。

デモ

ジャバスクリプト

$("#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/