Melaksanakan kesan penukaran gambar dipacu roda tetikus berdasarkan jquery_jquery

jQuery boleh menghasilkan kesan animasi yang setanding dengan Flash Tidak ada keraguan tentang perkara ini. Artikel ini akan menunjukkan kesan penukaran imej berdasarkan pacuan roda tetikus melalui contoh.

Kesan yang dicapai dalam contoh ini:
Gambar bertukar apabila roda tetikus ditatal.
Menyokong kekunci anak panah papan kekunci untuk mencapai kesan penukaran imej.
Menyokong mengklik untuk menukar gambar dan mengklik pada pautan gambar semasa.
Gelangsar bar kemajuan menunjukkan kemajuan bilangan gambar.
XHTML

<div class="demo"> 
 <div id="imageflow"> 
 <div id="Melaksanakan kesan penukaran gambar dipacu roda tetikus berdasarkan jquery_jquery"><img src="/static/imghwm/default1.png"  data-src="images/loader.gif"  class="lazy" alt="Melaksanakan kesan penukaran gambar dipacu roda tetikus berdasarkan 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 ialah lapisan paling luar dan mengandungi semua elemen yang diperlukan untuk keseluruhan kesan penatalan. #imageflow diperlukan dan nama ID elemen yang terkandung di dalamnya tidak boleh diubah suai Jika anda benar-benar mahu mengubah suainya, anda mesti mentakrifkan atau mengubah suai kod JS dahulu . #Melaksanakan kesan penukaran gambar dipacu roda tetikus berdasarkan jquery_jquery digunakan untuk memuatkan imej animasi yang memuatkan Sudah tentu, anda juga boleh menulis "memuatkan" atau teks lain secara langsung. #kapsyen digunakan untuk memaparkan kapsyen imej. #imejLetakkan imej yang anda mahu tatal dan tukar tiada had untuk nombor. #scrollbar ialah bar kemajuan yang memaparkan gambar. #slider ialah slider Apabila menukar gambar, slider akan meluncur ke kedudukan yang sepadan untuk memaparkan bilangan gambar.
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 } 
#Melaksanakan kesan penukaran gambar dipacu roda tetikus berdasarkan jquery_jquery { margin:0; color:#fff; text-align:center } 
#Melaksanakan kesan penukaran gambar dipacu roda tetikus berdasarkan 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 ialah bahagian penting untuk mencapai keseluruhan kesan Jika CSS tidak dikawal dengan baik, anda tidak akan mendapat kesan yang anda inginkan.
.demo menetapkan lebar dan tinggi serta menetapkan position:relative and overflow:hidden untuk mengehadkan skop roda tetikus menatal ke .demo. #images menetapkan nilai jidar dan menetapkan kedudukan relatif img dalaman. #captions menetapkan gaya yang digunakan untuk memaparkan tajuk gambar Ambil perhatian bahawa saya menggunakan gambar separa lutsinar cap_bg.png kerana gambar png lutsinar tidak disokong di bawah IE6, jadi anda Pemprosesan yang berkaitan diperlukan. Seterusnya, mari lihat tetapan bar kemajuan tatal dan peluncur Mereka semua menggunakan tetapan kedudukan dan kedalaman Mengapa mereka ditetapkan seperti ini Hanya jika anda mengujinya dengan perlahan, anda akan mengetahui rahsianya.
Memperkenalkan perpustakaan jquery dan fail js gelongsor

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

Semua tindakan js selesai dalam imageflow.js Saya hanya membuat sedikit perubahan dan semua orang boleh menggunakannya secara langsung.
Sekarang anda boleh lihat kesannya. Tetapi masih ada masalah:
Bagaimana untuk mendapatkan alamat pautan gambar?
Kesan akhir sepatutnya apabila anda mengklik pada imej yang sedang dipaparkan, anda akan disambungkan ke halaman untuk memaparkan maklumat terperinci yang berkaitan dengan imej. Jadi bagaimana untuk mendapatkan alamat pautan ini? Terdapat dua baris kod bermula dari baris 252:

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

Ia boleh dilihat bahawa alamat pautan gambar berasal dari atributnya: longdesc Apabila gambar diklik, halaman akan melompat ke halaman alamat yang sepadan. Nah, sekarang setelah kita kembali kepada kod XHTML yang kita mulakan, kita hanya perlu menetapkan atribut longdesc pada setiap imej dan menetapkan nilai kepada alamat halaman web yang sepadan. Seperti:

<img src="/static/imghwm/default1.png"  data-src="images/s1.jpg"  class="lazy" alt="image1" longdesc="#" /> 

Kini, tugasan telah selesai. Selepas membaca contoh ini, anda akan mendapati bahawa anda tidak memerlukan sebarang kod jquery sama sekali, kerana aliran imej telah melengkapkan semua kod operasi.

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.