画像切り替えを実現するjqueryマウスホイール-jsチュートリアル-php.cn

画像切り替えを実現するjqueryマウスホイール

php中世界最好的语言

リリース： 2018-04-26 09:58:43

オリジナル

2414 人が閲覧しました

今回は、画像切り替えを実現するための jquery マウスホイールについて説明します。jquery マウスホイールを使用して画像切り替えを実装するための注意事項は何ですか。以下は実際的なケースです。

この例で達成される効果: マウスホイールがスクロールされると画像が切り替わります。画像切り替え効果を実現するためにキーボードの矢印キーをサポートします。
クリックして写真を切り替えることと、現在の写真のリンクをクリックすることをサポートします。
進行状況バーのスライダーは、写真の数の進行状況を示します。

XHTML

<p class="demo"> 
 <p id="imageflow"> 
 <p id="loading"><img src="images/loader.gif" alt="loading" /></p> 
 <p id="captions"></p> 
 <p id="images"> 
 <img src="images/s1.jpg" alt="image1" /> 
 <img src="images/s2.jpg" alt="image2" /> 
 <img src="images/s3.jpg" alt="image3" /> 
 <img src="images/s4.jpg" alt="image4" /> 
 </p> 
 <p id="scrollbar"> 
 <p id="slider"></p> 
 </p> 
 </p> 
</p>

ログイン後にコピー

p.demoは最も外側のレイヤーであり、スクロール効果全体に必要な要素がすべて含まれています。 #imageflowは必須であり、それに含まれる要素のID名は変更できません。どうしても変更したい場合は、まずJSコードを定義するか直接変更する必要があります。 #loadingはローディングアニメーション画像をロードするために使用されます。もちろん、「ローディング中」または他のテキストを直接記述することもできます。 #captionsは、画像のキャプションを表示するために使用されます。 #imagesスクロールしたい写真を配置して切り替えます。数に制限はありません。 #scrollbarは、画像を表示するプログレスバーです。 #sliderは、写真を切り替えるときに、スライダーが対応する位置にスライドして写真の数を表示します。
CSS

.demo { width:860px; height:300px; margin:20px auto; position:relative; background:#e8f5fe; overflow:hidden } 
#images { margin:20px 0 0 60px; width:860px } 
#images img { position:absolute; margin-top:-160px } 
#loading { margin:0; color:#fff; text-align:center } 
#loading img { position:ralative; margin:0 } 
#captions { position:relative; height:24px; line-height:24px; top:100px; left:320px; background:url(images/cap_bg.png) no-repeat center center; color:#fff; font-weight:bold; text-align:center; z-index:10000 } 
#scrollbar { position:relative; top:-100px; height:2px; z-index:10001 background:#abcd3a url(images/scroll.gif) repeat-x; 
} 
#slider { position:absolute; width:15px; height:4px; margin:-1px 0 0 -1px; background:url(images/bar.gif) no-repeat; z-index:10002 }

ログイン後にコピー

CSSは、全体の効果を実現するための重要な部分です。CSSが適切に制御されていないと、期待する効果が得られません。
.demoは幅と高さを設定し、マウスホイールのスクロール範囲を.demoに制限するためにposition:relativeとoverflow:hiddenを設定します。 #imagesマージン値を設定し、内部画像の相対位置を設定します。 #captions は、画像のタイトルの表示に使用されるスタイルを設定します。背景画像として半透明の画像 cap_bg.png を使用していることに注意してください。透明な PNG 画像は IE6 ではサポートされていないため、関連する処理を実行する必要があります。次に、スクロールプログレスバーとスライダーの設定を見てみましょう。これらはすべて、位置と深さの設定を使用するものです。なぜこのように設定されているのかがわかります。 jquery ライブラリとスライディング js ファイルの紹介

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/imageflow.js"></script>

ログイン後にコピー

すべての js アクションは imageflow.js で完了しており、わずかな変更を加えただけなので、直接使用できます。

これで効果がわかります。しかし、まだ疑問があります:

画像リンクのアドレスを取得するにはどうすればよいですか? 最終的な効果は、現在表示されている画像をクリックすると、画像に関連する詳細情報を表示するページに接続されることです。では、このリンクアドレスを取得するにはどうすればよいでしょうか? 252 行目から始まる 2 行のコードがあります:

image.url = image.getAttribute("longdesc"); 
image.ondblclick = function() { document.location = this.url; }

ログイン後にコピー

画像のリンクアドレスはその属性 (longdesc) から取得されていることがわかります。 . 該当するアドレスのページに移動します。さて、最初の XHTML コードに戻ったので、各画像に longdesc 属性を割り当て、その値を対応する Web ページのアドレスに設定するだけです。例:

<img src="images/s1.jpg" alt="image1" longdesc="#" />

ログイン後にコピー

これでタスクは完了です。この例を読むと、imageflow がすべてのオペレーションコードをすでに完了しているため、jquery コードがまったく必要ないことがわかります。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

タブスクロールナビゲーション切り替え実装(コード付き)

jquery背景画像切り替え(コード付き)

以上が画像切り替えを実現するjqueryマウスホイールの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。