Rumah >hujung hadapan web >tutorial js >Perkongsian kod kesan khas tayangan slaid Jquery--tukar apabila tetikus meluncur ke atas butang (2)_jquery

Perkongsian kod kesan khas tayangan slaid Jquery--tukar apabila tetikus meluncur ke atas butang (2)_jquery

WBOYasal: 2016-05-16 15:45:001125semak imbas

Artikel ini terutamanya memperkenalkan jQuery untuk merealisasikan peta fokus slaid, yang boleh mencapai kesan slaid yang sangat mempesonakan dan bergaya Ia mempunyai nilai praktikal yang hebat dan pada asasnya boleh memuaskan hati anda apabila menggunakan kesan slaid (peta fokus) pada halaman web . Butirannya adalah seperti berikut

Penerangan kesan tayangan slaid: Gunakan tetikus untuk meluncur ke atas butang nombor di penjuru kanan sebelah bawah tayangan slaid untuk bertukar ke kiri dan kanan.

Kesan parameter pensuisan tersuai: suis ke bawah, masa penukaran ialah 8 saat, tukar apabila tetikus meluncur ke atas butang

Tangkapan skrin kesan berjalan adalah seperti berikut:

Kod khusus adalah seperti berikut

<head>

<title>Perkongsian kod kesan khas tayangan slaid Jquery--tukar apabila tetikus meluncur ke atas butang (2)_jquery</title>
<script src="js/jquery-1.4a2.min.js" type="text/javascript"></script>
<script src="js/jquery.-1.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
 $("#KinSlideshow").KinSlideshow({
 moveStyle:"down",
 intervalTime:8,
 mouseEvent:"mouseover",
 titleFont:{TitleFont_size:14,TitleFont_color:"#FF0000"}
 });
})
</script>
<style type="text/css">
.code{ height:auto; padding:20px; border:1px solid #9EC9FE; background:#ECF3FD;}
.code pre{ font-family:"Courier New";font-size:14px;}
.code pre code.note{ color:#999}
.code2{border:1px solid #FEB0B0; background:#FFF1F1; margin-top:10px;}
.code2 pre{ margin-left:20px; font-size:12px;}
.info{ font-size:12px; color:#666666; font-family:Verdana; margin:20px 0 50px 0;}
.info p{ margin:0; padding:0; line-height:22px; text-indent:40px;}
h2.title{ margin:0; padding:0; margin-top:50px; font-size:18px; font-family:"微软雅黑",Verdana;}
h2.title span.titleInfo{ font-size:12px; color:#333; margin-left:10px;font-family:Verdana;}
h3.title{ font-size:16px; font-family:"微软雅黑",Verdana;}
.importInfo{ font-family:Verdana; font-size:14px;}
</style>

</head>

<body>

<li><h3><a href="demo2.html">自定义切换参数效果</a></h3></li>
</ol>
 <div id="KinSlideshow" style="visibility:hidden;">
  <a target="_blank"><img src="images/11.png" alt="Perkongsian kod kesan khas tayangan slaid Jquery--tukar apabila tetikus meluncur ke atas butang (2)_jquery"    style="max-width:90%"  style="max-width:90%" /></a>
  <a target="_blank"><img src="images/23.png" alt="Perkongsian kod kesan khas tayangan slaid Jquery--tukar apabila tetikus meluncur ke atas butang (2)_jquery"    style="max-width:90%"  style="max-width:90%" /></a>
  <a target="_blank"><img src="images/22.png" alt="Perkongsian kod kesan khas tayangan slaid Jquery--tukar apabila tetikus meluncur ke atas butang (2)_jquery"    style="max-width:90%"  style="max-width:90%" /></a>
  <a target="_blank"><img src="images/5.jpg" alt="Perkongsian kod kesan khas tayangan slaid Jquery--tukar apabila tetikus meluncur ke atas butang (2)_jquery"    style="max-width:90%"  style="max-width:90%" /></a>
  <a target="_blank"><img src="images/4.jpg" alt="Perkongsian kod kesan khas tayangan slaid Jquery--tukar apabila tetikus meluncur ke atas butang (2)_jquery"    style="max-width:90%"  style="max-width:90%" /></a>
 </div>

</body>
</html>

Saya harap artikel ini akan membantu reka bentuk kesan khas Jquery semua orang.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Perkongsian kod kesan khas tayangan slaid Jquery--buka halaman dan pilih kaedah penukaran (3)_jquery secara rawakArtikel seterusnya：Perkongsian kod kesan khas tayangan slaid Jquery--buka halaman dan pilih kaedah penukaran (3)_jquery secara rawak

Artikel berkaitan

Lihat lagi