jquery - ホバー時の JQuery スライド イメージ

Question

JQUERYを使用して、マウスポインター（画像をクリックせずにホバーするだけ）が左側にあるときに8k幅の画像を左に移動し、右側にあるときに右に移動する方法を知りたいのですが、わかりませんその効果の正確な名前は何でしょうか。タイトルにスライド画像を使用しました。誰かがこれを行う方法を知っていれば、私はそれを非常に感謝しています...助けたい人のために事前に感謝します:D

Answer 1

jQueryの「ホバー」機能：http ：//api.jquery.com/hover/を、jQueryのマウス位置機能と組み合わせて使用​​できます。これはhttp://docs.jquery.com/Tutorials:Mouse_Positionにあります。

次に、画像上のマウスの位置に基づいて、handlerIn関数とhandlerOut関数を設定します。

Answer 2

これを行うには多くの方法がありますが、これが私が行うことです。これが私がすることです。

<script type='text/javascript'>
$(document).ready(function(){
    $('#cross-img').hover(function(){
        $(this).css('margin-left', '-8px');
            }, function() {
        $(this).css('margin-left', '0');
    });
});
</script>

動作を見る

Answer 3

これを行うには、おそらくいくつかの方法があります。頭のてっぺんから、おそらくイメージ div 内に 2 つの div (イメージの半分ごとに 1 つ) を作成し、jQuery ホバー メソッドを使用します。

http://api.jquery.com/hover/

Answer 4

を使用してマウスの位置を見つけます

$('img').mousemove(function(event){
    var horizontalMousePosition = event.pageX;
});

そして、それをページ上の画像の位置と比較します

var leftEdge = $('img').offset().left //Left edge
var rightEdge = $('img').offset().left + $('img').innerWidth(); //Right edge
var middle = rightEdge - leftEdge;

次に、マウスの位置が画像の半分の位置 (つまり左側) よりも「小さい」場合は、左に移動します。

if(horizontalMousePosition < middle){
    $('img').css({
        position: 'relative',
        left: -=50px
    });
}

これはすべて私の頭の上から外れているので、いじる必要があります。しかし、必要なすべての機能がそこにあるはずです。