javascript 別画像スクロール切り替えエフェクト idea_javascript スキル

まず最も一般的なアイデアについて説明します。

写真を ul などで囲み、float を設定します。次に、ul 自体を絶対として配置し、その親タグを相対として配置するように設定します。 ul の左または上の値を設定することで、画像キューのスクロール効果が実現します。

機能:

1 つの HTML 要素 (つまり、上記の ul) のみを操作し、システムのオーバーヘッドが低い; 最後までスクロールするとロールバックが発生します。大きいシーケンス番号から小さいシーケンス番号にスクロールすると、最後のシーケンス番号から最初のシーケンス番号までスクロールすると、「シューッ」という音とともに途中の画像がすべて通過します。 。

もう 1 つのアイデアは、XScroll.js で実装したアイデアです。すべての画像は絶対位置を使用します。詳細については、その記事を参照してください。

XScroll.js は完成後、基本的に 2 つの画像を同時に操作して画像切り替えを実装するため、システム消費が問題だと常々感じていました。そのため、合理化されたバージョンを書きたかったのですが、記事の冒頭で述べた最も一般的なバージョンは望ましくありませんでした。

その後、Tudou 女性チャンネルで画像スクロールの切り替えを実装するための別のアイデアを偶然発見しました。

彼の特徴は次のとおりです:

どのシリアル番号からどのシリアル番号にジャンプしても、1 ステップしかスクロールしません。たとえば、1 から 2 にジャンプしたり、1 から 3 にジャンプしたりしても、1 ステップだけスクロールします。途中に他の画像があっても、もちろん表示されません。最後まで来るとロールバックされますが、ロールバックは 1 ステップだけです。

この効果は素晴らしそうです。彼の HTML を調べたところ、実装は私の XScroll.js よりもはるかに簡単であることがわかりました。

コードをコピー コードは次のとおりです:

• /a


• /a>
  
• /a


• 

html 構造、非常に一般的なもので、すべての画像は次のように設定されます。 float:left 。しかし、JS には奇妙な点があり、現在の画像のみが表示されるように設定されており、他の画像は非表示になっています。スクロールすると次の画像が表示され、次の画像が現在の画像の前か後ろかを判断します。 : 現在の画像の後で左にスクロールして前に戻ります。

すべての画像がフローティングに設定されているため、任意の 2 つの画像が表示されると、フローティングにより画像が近くに表示されます。このように、画像の位置を気にする必要はありません。

さらに、この方法では、単一のイメージを操作するのではなく、イメージ コンテナー (つまり、ul) のみを操作する必要があるため、システム リソースが節約されます。

このアイデアは素晴らしく、シンプルで経済的だと思うので、この効果を記録するために XScroll2.js を書きました。とても良い感じです。

興味のある友人は、Paipai.com のホームページの画像切り替えを模倣した XScroll2.js サンプル ページ をご覧ください。その効果も上記と同じであるためです。しかし、どれだけの生徒が記事を最後まで読み進めることができるかわかりません。 。 。