Question

我试图独立制作一些元素。作为一个开始，我尝试了一个这样的元素，其类和＆amp;我定义为“明星”。当元素从原始位置移动800像素时，我希望它停止。我已经正确地做到了这一点。但问题是将其恢复到原来的位置。我希望它一旦元素在屏幕上可见就开始返回。目前停在800px。如果我继续向右滚动，它会以800px的速度停留在那里。但是当我开始向左滚动时，它立即开始向左移动。所以我看不到预期的效果。还请告诉我是否有更好的方法做同样的事情。因为我这样做的方式，当我尝试动画更多元素时，恐怕会变得非常复杂

$(function() {
var lastmove = 0;
$("body").mousewheel(function(event, delta) {
    this.scrollLeft -= (delta * 30);
    var move = 0;
    var move1 = 0;
    if (lastmove == 0 && delta == 1) { 
        //do nothing 
    }
    else {
        move = (lastmove * delta * -1) + 30;
    }
    if ((lastmove-move) > 30) { move = move * -1; }
    if (move > 800) { 
        move = 800; 
    }
    var position = $("#star").position();
    if (position.left < 0) { move = 0; }
    if (position.left > 800) { move = 800; }
    lastmove = move;
    $(".star").stop().animate({left: move}, "slow");
    event.preventDefault();
            });
         });

jsfiddle link

Answer 1

请参阅：http://jsfiddle.net/MZUhh/1/

  if(this.scrollLeft > 800 && delta == 1) return false;

简化代码：

$(function () {
$("body").mousewheel(function (event, delta) {
  this.scrollLeft -= (delta * 30);
  if (this.scrollLeft > 800) return false;
  $(".star").stop().animate({left: this.scrollLeft}, "slow");
  event.preventDefault();
});
});

Demo

jQuery动画单个元素

1 个答案: