0

ネットフリックスを模倣するアイテムのスライド リストを作成しようとしています。彼らのソース コードを見て、html マークアップを理解しました。その概念もほぼ理解できたと思います。ホバー中にcssの正しい位置を追跡し、ホバーが停止した後ではなく、ホバーが発生している間に別の関数を介して他のことを行うことができる必要があります。

編集:私が達成しようとしている概念の詳細。「セット」がスライドしている間、2 つのことを行う必要があります。

  1. 「アイテム」が画面から滑り落ちたときは、セットから削除してからセットの反対側に再挿入する必要があるため、いずれかの方向に画面から外れたことを知る方法が必要です。

  2. セットがいずれかの方向に完全にスライドしたタイミングを知る必要があるため、その位置をリセットできます。

セットが無限にスクロールするという錯覚を実現する唯一の方法は、セットがスライドしている間に CSS の位​​置を追跡することです。残りは処理できると思いますが、.hover() にプラグインする方法、または .hover() を中断せずに追跡する他の方法を知る必要があるだけです。

.hover が適切でない場合は、他の方法の提案を受け入れます。

これが私のコードです

HTML:

<div id="slider">
            <div class="set">
                <div class="item">
                    <img src="img/book.png">
                </div>
                <div class="item">
                    <img src="img/book.png">
                </div>
                <div class="item">
                    <img src="img/book.png">
                </div>
                <div class="item">
                    <img src="img/book.png">
                </div>
                <div class="item">
                    <img src="img/book.png">
                </div>
                <div class="item">
                    <img src="img/book.png">
                </div>
                <div class="item">
                    <img src="img/book.png">
                </div>
                <div class="item">
                    <img src="img/book.png">
                </div>
                <div class="item">
                    <img src="img/book.png">
                </div>
                <div class="item">
                    <img src="img/book.png">
                </div>
                <div class="item">
                    <img src="img/book.png">
                </div>
            </div><!--end set-->

            <div class="prevBtn"></div>
            <div class="nextBtn"></div>
        </div><!--end slider-->

スライダー.js:

(function() {

    var Slider = {

        init: function() {
            var set = $('#slider .set'),
            setLength = set.children().length * 190,

            prev = $('.prevBtn'),
            next = $('.nextBtn');
            self = this;


            prev.hover(function() {
                set
                    .css({right: set.position().right})
                    .animate({right: '-' + setLength + 'px'}, 8000);
            }, function() {
                set.stop();
            });

            next.hover(function() {
                set
                    .css({left: set.position().right})
                    .animate({right: setLength + 'px'}, 8000);
            }, function() {
                set.stop();
            });
        }
    }


    Slider.init();
}());

ありがとうございました

4

1 に答える 1

0

左の位置を追跡するという質問に答えたこのjqueryウォッチプラグインを見つけました。DomAttrModified または propertychange のみをチェックし、それ以外の場合はタイマーを実行して、パフォーマンス上の理由から本当に必要のない間隔で位置をチェックするため、制限があります。まだ十分なブラウザのサポートがないようですが、置き換えは「ミューテーション オブザーバー」になるようです。

しかし、その後、位置を追跡し、あらゆる種類のクレイジーな数学、速度計算、方向の決定、画像の削除/追加を実行するよりもコードが少なくて済むこのマーキー プラグインを見つけました。私が行くところはますます複雑に見えました。したがって、この 2 番目のソリューションを使用することにします。setInterval をホバー関数に置き換えて、ホバーされているボタンに基づいて方向を変更し、アニメーションを実行/停止することで変更できました。

これを使用して、この特定の目的のために書き直して、翌日か 2 日でここに投稿します。

于 2013-02-14T02:07:05.453 に答える