0

いくつかの要素を個別にアニメーション化しようとしています。最初に、クラスとIDを「スター」として定義した要素を1つ試しました。要素が元の位置から 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 リンク

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 に答える