2

マウスを左右に動かすと3枚の画像に変わる画像が欲しいのですが。

  • カーソルが左側にあるときに左矢印を表示するには、左
  • カーソルが中央にあるときに上矢印を表示する中央
  • カーソルが右側にあるときに右矢印を表示する右

うまく機能するjQueryスクリプトを見つけました。少し編集して、マウスを動かしたときに左右の矢印が表示されるようにしました。中央部分が残っているだけで、それを追加する方法がわかりません。

これが私が持っているものです。（jsFiddleページも参照してください：http：//jsfiddle.net/WhkJB/）

var image_src = {
    left: "http://i.imgur.com/ubKrq.jpg",
    right: "http://i.imgur.com/SxHCS.jpg",
};

$(document).mousemove(function(event){
    var mloc = {
        x: event.pageX,
        y: event.pageY
    };

    if( 
        (mloc.x >= 0 && mloc.x <= $(document).width()/2 )
    ){
        $(".arrow").attr("src", image_src.left);
    }else if( 
        (mloc.x >= $(document).width()/2 && mloc.x <= $(document).width()) &&
        (mloc.y >= 0 && mloc.y <= $(document).height()/2)
    ){
        $(".arrow").attr("src", image_src.right);
    }

});​

別の質問-画像の下にマウスを移動すると、機能しません。とにかくそれを作るためにそれがページ全体を移動するようにすることはありますか？

どんな助けでも大歓迎です。

4

1 に答える 1

0

最初にX位置のパーセンテージを計算してから、それに対して単純を適用できますif。

すなわち：

var image_src = {
    left: "http://i.imgur.com/ubKrq.jpg",
    right: "http://i.imgur.com/SxHCS.jpg",
    up: "http://i.imgur.com/SxHCS.jpg" // replace with UP image
};

$(document).mousemove(function(event){
    var xPercent = (event.pageX / $(document).width()) * 100;
    if(xPercent <= 40) { // show left
        $(".arrow").attr("src", image_src.left);
    }
    else if(xPercent >= 60) { // show right
        $(".arrow").attr("src", image_src.right);
    }
    else { // show up
        $(".arrow").attr("src", image_src.up);
    }
});​​​
于 2012-12-14T01:52:16.583 に答える