0

スクロール時に2つのdivを左からスライドインできるようにするこのコードがあります。問題は、スライドイン中に2つのDIVがオーバーラップすることです。別の問題は、このコードが一緒に近づくのではなく、関数を起動することです。あなたはスクロールしています。スクロール位置に合わせて中央に移動したいです。

上記のことを行うためにこのコードを変更するのを手伝ってくれる人がいれば幸いです。

ここではjsfiddleにあります http://jsfiddle.net/qqSc3/1/

jQuery(document).ready(function(){
var slide = jQuery(".post-129");
var slide2 = jQuery(".post-169");
var opening = false;
var closing = false;
jQuery(window).scroll(function() {
var pos = jQuery(window).scrollTop();
console.log(pos);
if (pos > 100) {
    if (!opening) {
        opening = true; closing = false;
        slide.stop().animate({
            'opacity': 1,
            'margin-left': 0
        }, 1000, function() {
            opening = false;
        });
        slide2.stop().animate({
            'opacity': 1,
            'margin-left': 0
        }, 1000, function() {
            opening = false;
        });
    }


} else {
    if (!closing) {
        closing = true; opening = false;
        slide.stop().animate({
            'opacity': 0,
            'margin-left': -1000
        }, 500, function() {
            closing = false;
        });
         slide2.stop().animate({
            'opacity': 0,
            'margin-left': -1000
        }, 500, function() {
            closing = false;
        });
    }
}
});
});

前もって感謝します！

4

1 に答える 1

1

これを試して。

JS Fiddle で見る

function scrollingSlider(selector, beginpos, endpos) {
    var slide,
        timeout = 0;
    slide = function () {
        var scrollpos;
        window.clearTimeout(timeout);
        timeout = 0;
        scrollpos = $(window).scrollTop();
        $(selector).each(function () {
            var $this = $(this),
                margintarget,
                margin = parseInt($this.css('margin-left'), 10),
                step;
            if (scrollpos <= beginpos) {
                margintarget = -1000;
            } else if (scrollpos >= endpos) {
                margintarget = 0;
            } else {
                margintarget = Math.round(-1000 * (endpos - scrollpos) / (endpos - beginpos));
            }
            if (margintarget === margin) {
                return; // nothing more to do
            }
            step = margintarget - margin;
            if (Math.abs(step) > 25) {
                step = 25 * (step < 0 ? -1 : 1);
            }
            $this.css('margin-left', margin + step);
            if (!timeout && (margin + step) !== margintarget) {
                timeout = window.setTimeout(slide, 10);
            }
        });
    };
    $(window).on('scroll', slide);
}
$(document).ready(function (){
    scrollingSlider('.post-129, .post-169', 100, 300);
});

ノート

この関数を使用するscrollingSliderには、jQuery セレクター、スライドを開始するスクロールトップの位置 (ピクセル単位)、およびスライドが完了するスクロールトップの位置 (ピクセル単位) を渡します。文字列セレクターを使用すると、大量の使用シナリオでメモリの解放を妨げる可能性のある DOM 要素にクロージャーを作成するという潜在的な問題を回避できます。

ポジショニング

また、スクロール位置を使用して要素をいつ表示するかを決定する代わりに、コードを変更して、各要素の現在の上部と下部の表示からの距離に基づいて物をスライドさせることをお勧めしますスクロールウィンドウの。これにより、次の 2 つのことが達成されます。

  1. ページを変更してコンテンツを追加または削除する (要素の垂直方向の位置を変更する) 場合、スクロールが正しく機能しません。
  2. さらに重要なことに、ページ全体を表示するのに十分な大きさの大きな画面を持っている人は、スクロール バーがないため、スライドイン要素を見ることさえありません! 物の可視性を (項目がビューポートに入るまでの距離ではなく) スクロールバーの位置に結び付けることは、コンテンツを完全に到達不能にする良い方法です。おそらく、探しているものではありません。注: 現在の画面の高さは 2880 ピクセルです。回転させてポートレート モードにすると、高さは 5120 ピクセルになります。それはたくさんあります一度に表示される Web ページの。これらの大きな画面サイズに対応するには、慎重に検討する必要があります。ウィンドウの高さに応じて、ページの下部にある種のパディングまたはスペースを追加して、スクロール バーを強制的に表示して使用できるようにすることができます (つまり、一番下までスクロールすると、表示されるアイテムの最下部がページの下部ではなく上部に表示されます)。

もう1つ注意してください：私はopacity完全に省きました。-1000px問題は、CSS ではasと言う必要-1000があり、単位がなく、無視されるためです。単位を使用できないのは、--そうでない場合のみです。そうしない0と、ブラウザーは、ems ではなく、ピクセルを意味していることをどのように認識しますか?.

確かに、jQuery のアニメーション機能は使用しませんでした。私はおそらく持っていたでしょう。.stop()関数を再度実行するために独自のタイムアウトを設定する代わりに、最初に未処理のアニメーションを停止して、要素を正しい位置にアニメーション化するよう jQuery に指示することもできました。それは完全に有効だったでしょう。今回はこれだけにしました。自由に変更してください。

説明

scrollイベントとなるスライドの初期トリガーを設定します。このslide関数では、関心のある各要素について、現在のスクロール位置に基づいて、スライド先の左マージンを計算します。要素をそのターゲットに向かって 25 ピクセル以内で移動します。目標位置に達していない場合は、タイマーをセットしてこのプロセスを繰り返します。スクロール イベントはターゲット位置を根本的に変更できるだけでなく、独自のアニメーションのカスケードを開始する可能性があるため、slide関数の開始時に設定されている未処理のタイマーをキャンセルします。

速度に関する考慮事項

10 ミリ秒では頻度が高すぎて、アニメーションが分厚い、または CPU を集中的に使用する場合は、値を上げて関数の起動頻度を減らし、最大ステップを同様の係数 (現在は 25) だけ増やします。アニメーションが遅すぎたり速すぎたりする場合は、それに応じて最大ステップを増減します。

さらなる速度向上のアイデア:

あなたの Web サイトでは、10 ミリ秒が経過する前にスライド関数が呼び出されるのを妨げている他のコードが同時に実行されています。その後、奇妙なことが起こります。

  1. スライド要素では、クラスの代わりに ID を使用してください。

  2. 提案されているように、タイムアウトを 40 ミリ秒または 100 ミリ秒などに変更し、オブジェクトが同様に移動されるピクセルの最大数を増やします。

  3. 対象を絞った使用シナリオでは、2 つのイメージが一緒にロックされているため、関数を取り出して、each両方の操作を同時に実行するだけです。これにより、実行時間が大幅に短縮されます。

最後に、使用上の注意: 複数のオブジェクトをアニメーション化するためにスクリプトを複数回含めないでください。代わりにscrollingSlider、関数内で複数回呼び出すだけreadyです!

アップデート

画面サイズに関する新しい重要な情報が更新された上記の「配置」セクションを参照してください。

于 2013-03-29T22:21:11.003 に答える