各マウスの移動でバックグラウンド位置を変更する必要があります

Question

各マウスの移動時にバックグラウンド位置を変更する必要があります。画像は、ここでは、背景として設定されている画像があり、

https://pbdlbd.org/ipositive/wp-content/uploads/2015/02/one10.jpg

、iは、各マウス移動の背景の位置を移動したいです。この画像は4つの部分（各部分の高さは523pxです）を持ち、最初に上部を表示し、マウスを移動すると2番目の部分が表示され、別のマウスの移動で3番目の部分が表示され、4番目の部分の後に繰り返されますさらにマウスをその上に移動します。マウスが画像から削除されると、画像のデフォルトの上部が表示されます。このような

何か、ここで

document.getElementById("#ipos .flex_cell").onmousemove = function() { 
    //Set background position 523px bottom on each mouse move 
    #ipos .flex_cell.style.background-position = center -523px (here i can't make it so that it changes to -1046px by code); 
} 

サイト、http://pbdlbd.org/ipositive/

であるあなたは、単に読んで（またはから読み取る必要があり、第4部まで1日からジャンプするために、事前

Answer 1

にありがとう現在の位置を別の変数に変更）し、オフセットを追加して、この合計をターゲットに設定します。

また、関数のif条件を使用して、4番目の部分から1番目に戻るジャンプを検出する必要があります。

ので（未テスト）になることができます：

var offset = 0; 
var jump = 523; 

$('#ipos .flex_cell').mousemove(function() { 
    if (offset > (3 * jump)) { 
     offset = 0; 
    } 
    else { 
     offset += jump; 
    } 

    $('#ipos .flex_cell').css('background-position', 'center ' + (offset * -1) + 'px'); 
}); 

しかし：これはあなたの質問への答えですが、それは問題を解決していません。 mousemoveはすべてのピクセルであるため、要素の上を移動します。このコードは大量のちらつきを引き起こします。したがって、最後のカーソル位置も覚えておいて、定義された移動距離にのみ作用する必要があります。

BRティム

Answer 2

あなたは、マウスの動きのすべてのインスタンスを取得するためにjQueryの.mousemoveを使用することができます。これはすべてのピクセルに登録されます。だから、私はそれをループにポップし、各マウスの移動数を40ずつ分けました（これに応じて自由に変更できます）。マウスが40ピクセル移動するたびに、ステージにステージを移動するためにイメージにクラスを追加し、サイクルが完了するとリセットします。以下のコードを参照してください。hereはフィドルです。それが理にかなって、運が良ければよいと願っています！

$('.wrapper').on('mouseover' , function(){ 
 
var count = 0; 
 
\t $('.wrapper').on('mousemove' , function(){ 
 
    \t var move = count/40; 
 
    if (move==1){ 
 
     $('.image').addClass('second'); 
 
    } 
 
    if (move==2){ 
 
     $('.image').addClass('third'); 
 
    } 
 
    if (move==3){ 
 
     $('.image').addClass('fourth'); 
 
    } 
 
    \t count++; 
 
    if(move>=4){ 
 
    \t \t count=0; 
 
     $('.image').removeClass('fourth third second'); 
 
     return count; 
 
    } 
 
    }); 
 
}); 
 
$('.wrapper').on('mouseout' , function(){ 
 
\t $('.image').removeClass('fourth third second'); 
 
});

.wrapper { 
 
    width: 200px; 
 
    height: 217px; 
 
    overflow:hidden; 
 
} 
 
.image{ 
 
    width:100%; 
 
} 
 
.second{ 
 
    margin-top:-217px; 
 
} 
 
.third{ 
 
    margin-top:-435px; 
 
} 
 
.fourth{ 
 
    margin-top:-652px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
<img class="image" src="http://pbdlbd.org/ipositive/wp-content/uploads/2015/02/one10.jpg" alt=""/> 
 
</div>