0

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

$(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链接

4

1 回答 1

3

看到这个：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();
});
});

演示

于 2013-01-15T07:34:12.427 回答