6

プロジェクトに優れたjQueryReelプラグイン（http://jquery.vostrel.cz/reel）を使用しています。ウィンドウスクロールイベントにバインドしたいので、ユーザーがページを下にスクロールすると、プラグインは10pxスクロールするごとに1フレーム進み、ユーザーが上にスクロールするとアニメーションが逆になります。

プラグインには、値を問題なく渡すことができるメソッドがあり、ウィンドウスクロールイベントにバインドする方法を知っています。私が苦労しているのは最後です。

jQuery / JavaScriptを使用して、アニメーションの垂直方向に1フレーム進むごとに10ピクセルごとに言うにはどうすればよいですか？ウィンドウスクロールを変数に格納できることは知っていますが、10倍の前進1フレームに達するたびにどのように言うかわかりません。

よろしくお願いします。

編集

以下のユーザーの助けを借りて、私は解決策を考え出しました。次のように：

$(window).scroll(function()
{
    windowScrollCount   = $(this).scrollTop();
    animationFrame      = Math.round(windowScrollCount / 100);
});

したがって、ここでは、windowScrollCountでスクロール距離を取得し、animationFrameでフレームに変換し、.reel（ "frame"、animationFrame）;で設定し直しています。私は実際には100フレームごとにこれを行っています。これは、10フレームごとに高速であるためです。

4

3 に答える 3

6

codef0rmerとnoShowPの助けを借りて、私は解決策を考え出しました。次のように：

$(window).scroll(function()
{
    windowScrollCount   = $(this).scrollTop();
    animationFrame      = Math.round(windowScrollCount / 100);
});

したがって、ここでは、windowScrollCountでスクロール距離を取得し、animationFrameでフレームに変換し、.reel（ "frame"、animationFrame）;で設定し直しています。私は実際には100フレームごとにこれを行っています。これは、10フレームごとに高速であるためです。

于 2012-05-03T13:26:22.523 に答える
3

私が間違っているなら、あなたはこれが欲しいかもしれません：

var jump = 500;  // consider this is your 10px 
window.scrollHeight = 0;
$(window).scroll(function () {
   console.log($(this).scrollTop());
   var diff = $(this).scrollTop() - window.scrollHeight;
    if (diff >= jump) {
       window.scrollHeight = $(this).scrollTop();   
       console.log('reload frame');
    }
});

デモ： http： //jsfiddle.net/Dyd6h/

于 2012-05-03T12:10:28.463 に答える
1

ページの上部に粘着性のある要素を含めることができます。

位置：固定; トップ0; 左：0;

（必要に応じて非表示にします）。

そして、スクロールしているときに、そのオフセットを監視できます。

$('element').offset().top

次に、ページをどれだけ下にスクロールしたかを確認できるので、スクロールするたびに、その最大値が何であるかを確認し、イベントを適切にトリガーしますか？

編集：

私はあなたが必要だと思うものの始まりで小さなJSfiddleをセットアップしました。

http://jsfiddle.net/qJhRz/3/

必要なフレームを計算し、それを変数に格納するだけです。それはあなたが探しているもののようなものですか？

于 2012-05-03T10:12:14.270 に答える