suchen

Heim  >  Artikel  >  Web-Frontend  >  jquery verdünnte Version von Banner, asynchrones Bild, Texteffekt, Bildwechsel, Spezialeffekte_jquery

jquery verdünnte Version von Banner, asynchrones Bild, Texteffekt, Bildwechsel, Spezialeffekte_jquery

WBOY
WBOYOriginal
2016-05-16 16:53:011127Durchsuche
Code kopieren Der Code lautet wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br><html xmlns="http://www.w3.org/1999/xhtml"> <br><head> <br><meta charset='utf-8'/> <br><title>全屏淡入淡出简洁banner，异步图片文字效果切换图片特效</title> <br><meta name="keywords" content="淡化版banner,淡化版banner"> <br><meta name="description" content="淡入淡出简洁banner" /> <br><style type="text/css"> <br>body,ul,li,ol{list-style:none;padding:0px;margin:0px;font-size:12px;} <br>img{border:0px;} <br><br>.bzBanner{width:100%; min-width:980px; height:auto; overflow:hidden; position: relative; } <br>.bzBanner .content,.bzBanner .col,.bzBanner .col a{width:100%; height:100%; position: absolute; top:0px; left:0px; } <br>.bzBanner .btn{position: absolute; bottom:25px; right:50px; z-index:5; } <br>.bzBanner .btn i{display:block; float: left; width:15px; height:15px; padding:0 5px; border-radius:15px; margin-left:15px; background:white; overflow:hidden; opacity:0.4; filter:alpha(opacity=40); cursor:pointer; } <br>.bzBanner .btn i:hover{background:#9C0; } <br>.bzBanner .btn i.act{opacity:0.8; filter:alpha(opacity=80); background:#9C0; } <br>.bzBanner .pre,.bzBanner .next{display:inline-block; width:72px; height:72px; background:url(./bzbanner/btn.png) no-repeat; position:absolute; top:50%; margin-top:-50px; z-index:3; } <br>.bzBanner .pre{left:30px; } <br>.bzBanner .next{right:30px; background-position:0 -72px; } <br>.bzBanner .pre:hover{background-position:0 -144px; } <br>.bzBanner .next:hover{background-position:0 -216px; } <br>.bzBanner .col a{color:white; } <br>.bzBanner .col span{display:inline-block; width:550px; height:200px; background:rgba(0,0,0,.1); position:absolute; z-index:3; bottom:70px; left:130px; } <br>.bzBanner .col span h3{font-weight:normal; font-size:28px; font-weight:normal; font-family:微软雅黑; padding:0px; margin:0px; padding-left:20px; line-height:70px; text-shadow:1px 1px rgba(0,0,0,.3); } <br>.bzBanner .col span p{display:inline-block; width:90%; line-height:25px; font-size: 14px; font-family:微软雅黑; margin:0px; padding:0px; padding-left:20px; text-shadow:1px 1px rgba(0,0,0,.3); } <br><br></style> <br></head> <br><body> <br><br><div class='bzBanner'> <br><div class='content'> <br><div class='col'> <br><a href='javascript:;' > <br><img src='./bzbanner/12.jpg' width=100% /> <br><span> <br><h3>独家首播：范玮琪&曾静玟《千年》</h3> <br><p>范玮琪&曾静玟《千年》MV首播！歌词特别力邀名词人葛大為操刀，延续“一日如千年”的概念，转换在爱情里就是可以把对方的思念拉得很长，每一秒的想念都可以像是一千年的蔓延。而一千年的等待，也因为一秒钟的珍爱相遇而有了意义爱情。</p> <br></span> <br></a> <br></div> <br><div class='col'> <br><a href='javascript:;' > <br><img src='./bzbanner/13.jpg' width=100% /> <br><span> <br><h3>独家首播：It Began With A Fallen Leaf</h3> <br><p>普莉西雅（Priscilla Ahn）和苏打绿全新单曲《It Began With A Fallen Leaf》MV首播！一袭白色雪纺洋装的普莉西雅置身于森林中，红发青峰似偶然闯入森林中活泼调皮的精灵，邂逅了森林中的仙女。歌曲由吴青峰作曲，普莉西雅和吴青峰共同作词，描述了对一位再也无法相见的好友的思念之情。</p> <br></span> <br></a> <br></div> <br><div class='col'> <br><a href='javascript:;' > <br><img src='./bzbanner/14.jpg' width=100% /> <br><span> <br><h3>首播：真的假的</h3> <br><p>暌违乐坛八年陶晶莹新专辑同名主打《真的假的》MV官方版首播!歌曲由周杰伦＋林夕两位乐坛大才子携手合作，唱出男女情爱中许多真真假假的现象和矛盾，MV由廖人帥执导，时而如梦幻童话时而如辉煌宫殿的场景布置亦真亦假似幻似真，逼真特技效果十足！</p> <br></span> <br></a> <br></div> <br><div class='col'> <br><a href='javascript:;' > <br><img src='./bzbanner/15.jpg' width=100% /> <br><span> <br><h3>口袋·FAN 把你的偶像装进口袋里</h3> <br><p>睡不着过后，梦游到这里。在亚纶生日的这一天迎来闪闪发亮的【口袋·炎亚纶】！这里有新鲜资讯影像 ，是勾搭交流平台。是炎亚纶专属，为每一个可爱的布丁纪念永恒，关于阿布有爱的一切都在这里，在这 里全世界只看见你，快把阿布装进口袋，祝炎亚纶1120生日快乐！Android版和IOS越狱版抢先上线…</p> <br></span> <br></a> <br></div> <br></div> <br><div class='btn'><i></i><i></i><i></i><i></i></div> <br><a class='pre' href='javascript:;' title='上一张' ></a> <br><a class='next' href='javascript:;' title='下一张' ></a> <br></div> <br><br><script type="text/javascript" src="./jquery-1.10.2.min.js" ></script> javascript" src="./bzBanner.min.js" ></script> <br><script type="text/javascript"> <br>$(function(){ benzi.bzBanner(); }); <br></script> <br></html>
code_snippet_id="280064" snippet_file_name="blog_20140408_2_455436" name="code" class="html">----------html----------------- -------------------------------------------------- --------------
<pre code_snippet_id=" 280064" snippet_file_name="blog_20140408_2_455436" name="code" class="javascript">/*============================= = ===== <br>@Titel: Verwässerte Version des Banners mit Titelbeschreibung und kleinem Button <br>@Zeit: 22.11.2013 <br>@Quelle: BENZI.PW <br>@Beschreibung: <br> <br>So verwenden Sie das Plug-in: <br>Bitte kopieren Sie das CSS-HTML vor der Verwendung vollständig.<br>benzi.bzBanner(); <br><br>Objektaufrufe werden alle in js geändert<br>container: äußerster Rahmen<br>cols: alle Inhalte<br>btns: alle kleinen Schaltflächen<br>act: Schaltfläche Name des Aktivierungsstils <br>Vorher: Schaltfläche „Vorwärts scrollen“ <br>Weiter: Schaltfläche „Rückwärts scrollen“ <br><br><br>====*/ <br>var benzi = { <br>bzBanner: function (){ <br><br>//Alle Parameter werden initialisiert (werden nach der Kapselung gelöscht) <br>var value = { <br>container:$('.bzBanner'), <br>cols:$('. bzBanner .col'), <br>btns:$('.bzBanner .btn i'), <br>act:'act', <br>pre:$('.bzBanner .pre'), <br>next : $('.bzBanner .next'), <br>now:0 <br>} <br><br>//Fade-Effekt, Zindex aller einzelnen Objekte festlegen und ein- und ausblenden <br>// col: all Content object <br> // pre: vorheriges Objekt <br> // now: aktuell angezeigtes Objekt <br> // --------- - <br>var schwach = function( pre,now ){ <br>var col = Values.cols; <br>col.css({ zIndex:1 }).eq( pre ).css({ zIndex:2 } ); >//Inkrementelle Berechnung, Rückgabe des zuvor angezeigten Inhalts und des aktuell anzuzeigenden Inhalts<br>// jetzt: der aktuell ausgewählte Index<br>//---------------- --- <br>var raise = function( now ){ <br>var pre = now ,now = pre 1; <br>if( now >= Values.cols.length ) now = 0; { pre:pre ,now:now }; <br>} <br><br>//Abnehmende Berechnung<br>//------------------ <br> var regression = function( now ){ <br>var pre = now ,now = pre - 1; <br>if( now < 0 ) now = effects.cols.length-1; <br>return { pre: pre ,now:now }; <br>} <br><br>//Ändern Sie den Stil der kleinen Schaltfläche<br>//------ <br>var btnStyle = function( now ){ <br>if( Values.btns && Values.act ) <br>values.btns.removeClass( Values.act ).eq( Now ).addClass( Values.act ); 🎜>} <br><br>//Kleiner Schaltflächen-Ereignis-Hook, wenn in der Initialisierung eine kleine Schaltfläche vorhanden ist, wird diese ausgeführt, andernfalls wird sie nicht ausgeführt <br>//-------- -------- ------ <br>var button = function(){ <br>values.btns.click(function(){ <br>var now = $(this).index( ); now; <br>} <br>}); <br>} <br><br>//Inhaltsumschaltung<br>// Aspekt: ​​Richtung, 0 oder kein Wert bedeutet Rückwärtsspiegeln, 1 bedeutet Vorwärtsspiegeln<br> //------ ---------------- <br>var change = function(Aspect){ <br>var val =Aspekt(values.now): raise( val.now ); <br>weaken( val.pre ,val.now ); <br>btnStyle( <br>text( val.now ); jetzt; <br>} <br><br>//Linke und rechte Tasteneffekte<br>//-------- <br> var Shortcut = function(){ <br>values.pre.click(function(){ change(1); }); <br>values.next.click(function(){ change(); }); >} <br><br>// Textwechseleffekt, dieser Effekt ist sehr gezielt und erfordert Stilunterstützung <br>//------- <br>var text = function ( now ){ <br>values.cols.find('span').css({ opacity:0 }).eq( now ).stop(true).delay(500).animate( { opacity:1 }, 1000); <br>values.cols.find('h3').css({ opacity:0 }).eq( now ).stop(true).delay(500).animate({ opacity:1 },500 ); <br>values.cols.find('p').css({ opacity:0 }).eq( now ).stop(true).delay(1000).animate({ opacity :1 },500) ; <br>} <br><br>//Rahmengröße<br>//--------- -------- - <br>$(window).resize(function(){ <br>values.container.height( Values.cols.find('img').height() ); <br>}).resize(); <br><br>//Automatische Wiedergabe, die Grad-Methode ruft die entsprechenden Parameter ab, ändert den Stil der kleinen Schaltfläche (falls vorhanden) und aktualisiert dann die globalen Variablenwerte. jetzt <br>// time: Verzögerungszeit<br> //------------------------------------ <br>var loop,play = function( time ){ <br>clearTimeout( loop ); <br>loop = setTimeout (function(){ <br>change(); <br>play( 3000 ); <br>}, time ); <br>} <br><br>//Pause und automatische Wiedergabe auslösen<br>// --------------------- <br>var control = function(){ <br>values.container .hover(function(){ <br>clearTimeout( loop ); <br>},function(){ <br>play( 2000 ); <br>}); <br><br>// Initialisieren Sie den Effekt und rufen Sie jede Funktion auf <br>//-- ------------------- <br>var initialize = function(){ <br>var now = Values. now; <br>weaken(values.cols.length-1 ,now ); <br>if(values.btns ) button(); >btnStyle( now ); <br>play( 4000 ); <br>control(} <br><br>//Initialisierungsaufruf<br>//-- ------------- ----- <br>initialize(); <br><br>} <br><br>} <br>
< br>


< pre> ;/pre>
 
 
< ;pre> 

 
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：js erhalten hochgeladene Dateigröße, Beispielcode_Javascript-KenntnisseNächster Artikel：js erhalten hochgeladene Dateigröße, Beispielcode_Javascript-Kenntnisse
In Verbindung stehende Artikel
Mehr sehen