1

スクロールソリューションのみを見つけます。

私がやろうとしているのは、アニメーション(左または右)を使用して画面上で円を移動し、次にもちろん上/下に移動することです。

問題は、ブラウザが必要に応じて円を上/下にスムーズにスクロールできるようにする場合です。

これは、いじり回すためだけに書いた単純で簡単な汚れたコードです。

$('#circle').animate({'left': (start)+'px'},'slow').fadeIn('slow', function(){
        $(this).animate({'left': '+='+(stopRight)+'px'}, 2000, function(){
            $(this).animate({'top': '+='+(downRight)+'px'}, 2000, function(){
                $(this).animate({'left': '-='+(leftRight)+'px'}, 2000, function(){
                });
            });
        });
    });

どこで/どのようにスクロールしますか、提案のヒント、とにかく以下のコードに乗る予定です。

4

1 に答える 1

1

これは、アニメーション シーケンスに基づく実用的なソリューションです。

この 実用的なフィドルの例を参照してください!

HTML

<div id="circle"></div>

CSS は Fiddle で正規化されていますが、関連性はありません

html, body {
  width: 100%;
  height: 100%;
}
#circle {
  width: 20px;
  height: 20px;
  background-color: #444;
  border: 1px solid #212121;
  border-radius: 10px;
  position: absolute;
  top: 300px;
  left: 300px;
}

jQuery プラグインが必要です。以下の.watch()リンクを参照してください

// initial values to your variables
var start     = 0,
    stopRight = 1000,
    downRight = 300,
    leftRight = 300;

// your code as it was
$('#circle').animate({'left': (start)+'px'},'slow').fadeIn('slow', function(){
  $(this).animate({'left': '+='+(stopRight)+'px'}, 2000, function(){
    $(this).animate({'top': '+='+(downRight)+'px'}, 2000, function(){
      $(this).animate({'left': '-='+(leftRight)+'px'}, 2000, function(){});
    });
  });
});

// the code to make it all happen!
$('#circle').watch("left,top", function() {
    $("html, body").animate({
        scrollTop  : $('#circle').offset().top,
        scrollLeft : $('#circle').offset().left,
    }, 20);
}, 100);

使用プラグイン

jQuery CSS プロパティ監視プラグイン

これが行うことは、要素の動きを追跡し、スクロールバーを操作して常に表示されるようにすることです。

jQuery .scrollTop() 一致した要素のセットの最初の要素のスクロール バーの現在の垂直位置を取得します。

jQuery .scrollLeft() 一致した要素のセットの最初の要素のスクロール バーの現在の水平位置を取得します。

jQuery .offset() ドキュメントを基準にして、一致した要素のセット内の最初の要素の現在の座標を取得します。

于 2012-06-09T00:07:10.233 に答える