suchen

Heim >Web-Frontend >js-Tutorial >Jquery-Diashow-Spezialeffektcode-Sharing – wechseln Sie, wenn die Maus über die Schaltfläche (2)_jquery fährt

Jquery-Diashow-Spezialeffektcode-Sharing – wechseln Sie, wenn die Maus über die Schaltfläche (2)_jquery fährt

WBOY
WBOYOriginal
2016-05-16 15:45:001097Durchsuche

In diesem Artikel wird hauptsächlich jQuery vorgestellt, um die Slide-Focus-Map zu realisieren, die einen sehr schillernden und modischen Slide-Effekt erzielen kann. Sie ist von großem praktischen Wert und kann Sie grundsätzlich zufriedenstellen, wenn Sie den Slide-Effekt (Focus-Map) auf der Webseite verwenden . Die Details sind wie folgt

Beschreibung des Diashow-Effekts: Benutzen Sie die Maus, um über die Zifferntaste in der unteren rechten Ecke der Diashow zu fahren, um nach links und rechts zu wechseln.

Benutzerdefinierter Schaltparametereffekt: nach unten schalten, Schaltzeit beträgt 8 Sekunden, schalten, wenn die Maus über die Schaltfläche gleitet

Der Screenshot des Laufeffekts sieht wie folgt aus:

Der spezifische Code lautet wie folgt

<head>

<title>Jquery-Diashow-Spezialeffektcode-Sharing – wechseln Sie, wenn die Maus über die Schaltfläche (2)_jquery fährt</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="Jquery-Diashow-Spezialeffektcode-Sharing – wechseln Sie, wenn die Maus über die Schaltfläche (2)_jquery fährt"    style="max-width:90%"  style="max-width:90%" /></a>
  <a target="_blank"><img src="images/23.png" alt="Jquery-Diashow-Spezialeffektcode-Sharing – wechseln Sie, wenn die Maus über die Schaltfläche (2)_jquery fährt"    style="max-width:90%"  style="max-width:90%" /></a>
  <a target="_blank"><img src="images/22.png" alt="Jquery-Diashow-Spezialeffektcode-Sharing – wechseln Sie, wenn die Maus über die Schaltfläche (2)_jquery fährt"    style="max-width:90%"  style="max-width:90%" /></a>
  <a target="_blank"><img src="images/5.jpg" alt="Jquery-Diashow-Spezialeffektcode-Sharing – wechseln Sie, wenn die Maus über die Schaltfläche (2)_jquery fährt"    style="max-width:90%"  style="max-width:90%" /></a>
  <a target="_blank"><img src="images/4.jpg" alt="Jquery-Diashow-Spezialeffektcode-Sharing – wechseln Sie, wenn die Maus über die Schaltfläche (2)_jquery fährt"    style="max-width:90%"  style="max-width:90%" /></a>
 </div>

</body>
</html>

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

Stellungnahme：
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
Vorheriger Artikel：Jquery-Diashow-Spezialeffektcode-Sharing – Öffnen Sie die Seite und wählen Sie zufällig die Umschaltmethode (3)_jquery ausNächster Artikel：Jquery-Diashow-Spezialeffektcode-Sharing – Öffnen Sie die Seite und wählen Sie zufällig die Umschaltmethode (3)_jquery aus

In Verbindung stehende Artikel

Mehr sehen