jquery_jqueryに基づいたマウスホイール駆動の画像切り替え効果の実装

jQuery は Flash に匹敵するアニメーション効果を生成できます。この記事では、例を通してマウス ホイール ドライブに基づいた画像切り替え効果を示します。

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

<div class="demo"> 
 <div id="imageflow"> 
 <div id="jquery_jqueryに基づいたマウスホイール駆動の画像切り替え効果の実装"><img src="/static/imghwm/default1.png"  data-src="images/loader.gif"  class="lazy" alt="jquery_jqueryに基づいたマウスホイール駆動の画像切り替え効果の実装" /></div> 
 <div id="captions"></div> 
 <div id="images"> 
 <img src="/static/imghwm/default1.png"  data-src="images/s1.jpg"  class="lazy" alt="image1" /> 
 <img src="/static/imghwm/default1.png"  data-src="images/s2.jpg"  class="lazy" alt="image2" /> 
 <img src="/static/imghwm/default1.png"  data-src="images/s3.jpg"  class="lazy" alt="image3" /> 
 <img src="/static/imghwm/default1.png"  data-src="images/s4.jpg"  class="lazy" alt="image4" /> 
 </div> 
 <div id="scrollbar"> 
 <div id="slider"></div> 
 </div> 
 </div> 
</div> 

div.demo は最も外側のレイヤーであり、スクロール効果全体に必要なすべての要素 が含まれています。 #imageflow は必須であり、その中に含まれる要素の ID 名は変更できません。実際に変更したい場合は、まず JS コード を定義するか、直接変更する必要があります。 #jquery_jqueryに基づいたマウスホイール駆動の画像切り替え効果の実装 はローディングアニメーション画像をロードするために使用されます。もちろん、「jquery_jqueryに基づいたマウスホイール駆動の画像切り替え効果の実装」または他のテキストを直接記述することもできます。 #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 } 
#jquery_jqueryに基づいたマウスホイール駆動の画像切り替え効果の実装 { margin:0; color:#fff; text-align:center } 
#jquery_jqueryに基づいたマウスホイール駆動の画像切り替え効果の実装 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ライブラリとsliding 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="/static/imghwm/default1.png"  data-src="images/s1.jpg"  class="lazy" alt="image1" longdesc="#" /> 

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

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。