Heim > Web-Frontend > js-Tutorial > Hauptteil

Jquery-Diashow-Spezialeffektcode-Sharing – Öffnen Sie die Seite und wählen Sie zufällig die Umschaltmethode (3)_jquery aus

WBOY
Freigeben: 2016-05-16 15:44:58
Original
1142 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Implementierung einer Slide-Focus-Map vorgestellt, die einen sehr schillernden und modischen Slide-Effekt erzielen kann. Es ist von großem praktischem Wert und kann Sie grundsätzlich mit der Verwendung von Slide-Focus-Map-Effekten auf Webseiten zufriedenstellen Ich brauche es. Sie können sich auf Folgendes beziehen:

Beschreibung des Diashow-Effekts: Anders als in den beiden vorherigen Abschnitten kann dieser Spezialeffekt die Seite öffnen und die Umschaltmethode (Richtung) zufällig auswählen

Der Screenshot des Laufeffekts sieht wie folgt aus:

Der spezifische Code lautet wie folgt

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Jquery-Diashow-Spezialeffektcode-Sharing – Öffnen Sie die Seite und wählen Sie zufällig die Umschaltmethode (3)_jquery aus</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="Jquery-Diashow-Spezialeffektcode-Sharing – Öffnen Sie die Seite und wählen Sie zufällig die Umschaltmethode (3)_jquery aus"    style="max-width:90%"  style="max-width:90%" /></a>
  <a target="_blank"><img src="images/23.png" alt="Jquery-Diashow-Spezialeffektcode-Sharing – Öffnen Sie die Seite und wählen Sie zufällig die Umschaltmethode (3)_jquery aus"    style="max-width:90%"  style="max-width:90%" /></a>
  <a target="_blank"><img src="images/4.jpg" alt="Jquery-Diashow-Spezialeffektcode-Sharing – Öffnen Sie die Seite und wählen Sie zufällig die Umschaltmethode (3)_jquery aus"    style="max-width:90%"  style="max-width:90%" /></a>
  <a target="_blank"><img src="images/5.jpg" alt="Jquery-Diashow-Spezialeffektcode-Sharing – Öffnen Sie die Seite und wählen Sie zufällig die Umschaltmethode (3)_jquery aus"    style="max-width:90%"  style="max-width:90%" /></a>
  <a target="_blank"><img src="images/22.png" alt="Jquery-Diashow-Spezialeffektcode-Sharing – Öffnen Sie die Seite und wählen Sie zufällig die Umschaltmethode (3)_jquery aus"    style="max-width:90%"  style="max-width:90%" /></a>
 </div>
  
</body>
</html>
Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für das JQuery-Spezialeffektdesign aller hilfreich sein wird.

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage