Question

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

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

我希望在每次鼠标移动时移动背景位置。该图像有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/

提前谢谢

Answer 1

您可以使用jQuery的.mousemove来获取鼠标移动的每个实例。这将注册每个像素。所以我将它弹出一个循环并将每次鼠标移动的计数除以40（随意更改相应）。每当鼠标移动40个像素时，我就会在图像中添加一个类，以便为每个阶段向上移动它，并在它循环后重置。请参阅下面的代码，here是一个小提琴。希望它有意义，祝你好运！

$('.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>

Answer 2

对于从第1部分到第4部分的跳跃，您只需要读取（或从单独的变量读取）当前位置并添加偏移并将此总和设置为目标。

你还必须在函数中使用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');
});

但是：这只是你问题的答案，但并没有解决问题。因为鼠标移动是每个像素你移动元素..所以这个代码将导致massiv闪烁。因此，您还应该记住最后一个光标位置，并且只对定义的移动距离起作用。

BR Tim

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

2 个答案: