Perkongsian kod kesan khas tayangan slaid Jquery--buka halaman dan pilih kaedah penukaran (3)

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

WBOY

Lepaskan： 2016-05-16 15:44:58

asal

1188 orang telah melayarinya

Artikel ini terutamanya memperkenalkan jQuery untuk melaksanakan peta fokus slaid, yang boleh mencapai kesan slaid yang sangat mempesonakan dan bergaya Ia mempunyai nilai praktikal yang hebat dan pada dasarnya boleh memuaskan anda untuk menggunakan kesan slaid (peta fokus) pada halaman web memerlukannya Anda boleh merujuk kepada
berikut

Penerangan kesan tayangan slaid: Berbeza daripada dua bahagian sebelumnya, kesan istimewa ini boleh membuka halaman dan memilih kaedah penukaran (arah) secara rawak

Tangkapan skrin kesan berjalan adalah seperti berikut:

Kod khusus adalah seperti berikut

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Perkongsian kod kesan khas tayangan slaid Jquery--buka halaman dan pilih kaedah penukaran (3)_jquery secara rawak</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">

//打开页面随机选择 切换方式（方向）,怕增大KinSlideshow.js文件 就没把随机切换写到里面。
//使用时如有需要随机自己写在前面是一样的。而且还可以只固定随机切换哪几种。

var moveStyle
var rand =parseInt(Math.random()*4)
switch(rand){
 case 0: moveStyle="left" ;break;
 case 1: moveStyle="right" ;break;
 case 2: moveStyle="down" ;break;
 case 3: moveStyle="up" ;break;
}
$(function(){
 $("#KinSlideshow1").KinSlideshow({moveStyle:moveStyle});
 
})
</script>
<style type="text/css">
#KinSlideshow{ overflow:hidden; width:600px; height:300px;}
</style>

</head>

<body>

<h2>打开页面随机选择切换方式（方向）---刷新看看 ^_^</h2>
 <div id="KinSlideshow1" style="visibility:hidden;">
  <a target="_blank"><img src="images/11.png" alt="Perkongsian kod kesan khas tayangan slaid Jquery--buka halaman dan pilih kaedah penukaran (3)_jquery secara rawak"    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--buka halaman dan pilih kaedah penukaran (3)_jquery secara rawak"    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--buka halaman dan pilih kaedah penukaran (3)_jquery secara rawak"    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--buka halaman dan pilih kaedah penukaran (3)_jquery secara rawak"    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--buka halaman dan pilih kaedah penukaran (3)_jquery secara rawak"    style="max-width:90%"  style="max-width:90%" /></a>
 </div>
  
</body>
</html>

Salin selepas log masuk

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