


SuperSlide2 implémente les effets spéciaux de défilement d'image_effets spéciaux d'image
May 16, 2016 pm 04:43 PMJe publierai mon code de démonstration ici, dans l'espoir d'inspirer les amis qui l'utilisent. Je l'ai implémenté ici en combinant deux exemples
..focus-item ul li.item{ text-align: center; } .scroll-area .prev,.scroll-area .next{ position: absolute; bottom: 590px; width: 29px; height: 64px; opacity: 0.6; overflow: hidden; display: none; text-indent: -999px; border: medium none; background: url('/images/arrowLR.png') no-repeat scroll 0% 0% transparent; } .scroll-area .prev{ left: 0px; background-position: -50px 0px; } .scroll-area .next{ right: 0px; } .scroll-area .bdOn .prev,.scroll-area .bdOn .next{ display: block; } .scroll-area .focus-hd{ /*width: 832px;*/ /*left: 60px;*/ /*position: absolute;*/ /*height: 100px;*/ /*overflow: hidden;*/ left: 63px; position: absolute; } .focus-hd .sNext, .focus-hd .sPrev{ float: left; display: block; width: 14px; height: 47px; text-indent: -9999px; background: url('/images/sprites1008.png') no-repeat scroll 0px -3046px transparent; } .focus-hd .sNext{ background-position: 0px -2698px; } .focus-hd .show_bottom_nav { float: left; margin: 0px 6px; display: inline; width: 832px; overflow: hidden; } .focus-hd .show_bottom_nav ul li{ margin-left:15px; }
Code de démonstration HTML :
<div id="" class="scroll-area"> <div class="focus-item"> <ul> <li data-bottom-thumb="/attachments/news_gallery/20140528162328_454.jpg" class="item" data-text-id="#thumbTxt1"> <img src="/attachments/news_gallery/20140528162328_454.jpg" alt="标题1" /> </li> <li data-bottom-thumb="/attachments/news_gallery/20140528162328_733.jpg" class="item" data-text-id="#thumbTxt2"> <img src="/attachments/news_gallery/20140528162328_733.jpg" alt="标题2" /> </li> </ul> <a class="prev" href="javascript:void(0)"></a> <a class="next" href="javascript:void(0)"></a> </div> <div class="focus-hd" > <a class="sPrev prevStop" href="javascript:void(0)">←</a> <div class="show_bottom_nav"> <ul> <li data-bottom-thumb="/attachments/news_gallery/20140528162328_454.jpg" class="item" data-text-id="#thumbTxt1" style="float: left"> <img style="width: 150px;height: 100px" src="/attachments/news_gallery/20140528162328_454.jpg" alt="标题1" /> </li> <li data-bottom-thumb="/attachments/news_gallery/20140528162328_733.jpg" class="item" data-text-id="#thumbTxt2" style="float: left"> <img style="width: 150px;height: 100px" src="/attachments/news_gallery/20140528162328_733.jpg" alt="标题2" /> </li> </ul> </div> <a class="sNext" href="javascript:void(0)">→</a> </div> </div>
code du script js :
jQuery(".scroll-area").slide({titCell:'.focus-hd li',mainCell:'.focus-item ul',delayTime:0,trigger:0,autoPlay:true}); jQuery(".scroll-area .focus-item").hover(function(){jQuery(this).addClass("bdOn")},function(){jQuery(this).removeClass('bdOn')}); //小标签的导航 jQuery(".scroll-area .show_bottom_nav").slide({ mainCell:"ul",delayTime:100,vis:5,effect:"left",autoPage:true,prevCell:".sPrev",nextCell:".sNext" });

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Remplacer les caractères de chaîne en javascript

Tutoriel de configuration de l'API de recherche Google personnalisé

8 Superbes plugins de mise en page JQuery Page

Créez vos propres applications Web Ajax

Qu'est-ce que & # x27; ceci & # x27; en javascript?

Améliorez vos connaissances jQuery avec le spectateur source

10 feuilles de triche mobiles pour le développement mobile
