jquery - 需要在每次鼠标移动时更改背景位置

Question

我需要在每次鼠标移动时更改背景位置。图片设置为背景，这里是图片，

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

我想在每次鼠标移动时移动背景位置。此图像有 4 个部分(每个部分的高度为 523 像素)，首先它会显示顶部，鼠标移过后会显示第二部分，再移动鼠标时会显示第三部分，在第四部分之后会重复进一步鼠标移到它上面。将鼠标从图像上移开后，它将显示图像的默认顶部。

像这样，

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/

提前致谢

Answer 1

您可以使用 jQuery 的 .mousemove 获取鼠标移动的每个实例。这将为每个像素注册。所以我将它放入一个循环中，并将每次鼠标移动的计数除以 40(随意相应地更改它)。每次鼠标移动 40 个像素时，我都会向图像添加一个类，以将其向上移动到每个阶段，并在循环通过后重置。请参阅下面的代码和 here是一个 fiddle 。希望这是有道理的，祝你好运!

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