Web-Frontend
js-Tutorial
jquery verdünnte Version von Banner, asynchrones Bild, Texteffekt, Bildwechsel, Spezialeffekte_jquery
jquery verdünnte Version von Banner, asynchrones Bild, Texteffekt, Bildwechsel, Spezialeffekte_jquery
<!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>
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Schnelle Anwendung: Praktische Entwicklungsfallanalyse des asynchronen HTTP-Downloads mehrerer PHP-Dateien
Sep 12, 2023 pm 01:15 PM
Schnelle Anwendung: Praktische Entwicklungsfallanalyse von PHP Asynchroner HTTP-Download mehrerer Dateien Mit der Entwicklung des Internets ist die Funktion zum Herunterladen von Dateien zu einem der Grundbedürfnisse vieler Websites und Anwendungen geworden. In Szenarien, in denen mehrere Dateien gleichzeitig heruntergeladen werden müssen, ist die herkömmliche synchrone Download-Methode oft ineffizient und zeitaufwändig. Aus diesem Grund ist die Verwendung von PHP zum asynchronen Herunterladen mehrerer Dateien über HTTP eine zunehmend verbreitete Lösung. In diesem Artikel wird anhand eines tatsächlichen Entwicklungsfalls detailliert analysiert, wie PHP asynchrones HTTP verwendet.
Wie Swoole asynchrone SMTP-Vorgänge unterstützt
Jun 25, 2023 pm 12:24 PM
Mit der kontinuierlichen Weiterentwicklung und Popularisierung des Internets ist E-Mail zu einem unverzichtbaren Bestandteil des Lebens und der Arbeit der Menschen geworden, und SMTP (Simple Mail Transfer Protocol) ist eines der wichtigen Protokolle für den E-Mail-Versand. Als asynchrones Netzwerkkommunikations-Framework für PHP kann Swoole asynchrone SMTP-Vorgänge gut unterstützen und so den E-Mail-Versand effizienter und stabiler machen. In diesem Artikel wird vorgestellt, wie Swoole asynchrone SMTP-Vorgänge unterstützt, einschließlich der Verwendung
Erweiterter Leitfaden zu Python Asyncio: Vom Anfänger zum Experten
Mar 04, 2024 am 09:43 AM
Gleichzeitige und asynchrone Programmierung Bei der gleichzeitigen Programmierung geht es um die gleichzeitige Ausführung mehrerer Aufgaben. Bei der asynchronen Programmierung handelt es sich um eine Art der gleichzeitigen Programmierung, bei der Aufgaben keine Threads blockieren. asyncio ist eine Bibliothek für die asynchrone Programmierung in Python, die es Programmen ermöglicht, I/O-Vorgänge auszuführen, ohne den Hauptthread zu blockieren. Ereignisschleife Der Kern von Asyncio ist die Ereignisschleife, die I/O-Ereignisse überwacht und entsprechende Aufgaben plant. Wenn eine Coroutine bereit ist, wird sie von der Ereignisschleife ausgeführt, bis sie auf E/A-Operationen wartet. Anschließend wird die Coroutine angehalten und die Ausführung anderer Coroutinen fortgesetzt. Coroutinen Coroutinen sind Funktionen, die die Ausführung anhalten und fortsetzen können. Das Schlüsselwort asyncdef wird zum Erstellen von Coroutinen verwendet. Die Coroutine verwendet das Schlüsselwort „await“, um auf den Abschluss des E/A-Vorgangs zu warten. Die folgenden Grundlagen von Asyncio
Entwicklung asynchroner PHP-Coroutinen: Beschleunigen Sie das Daten-Caching sowie Lese- und Schreibvorgänge
Dec 18, 2023 pm 01:09 PM
Asynchrone PHP-Coroutinen-Entwicklung: Beschleunigung von Daten-Caching sowie Lese- und Schreibvorgängen. In der tatsächlichen Anwendungsentwicklung sind Daten-Caching sowie Lese- und Schreibvorgänge häufige Leistungsengpässe. Um die Systemeffizienz und das Benutzererlebnis zu verbessern, kann die asynchrone PHP-Coroutine-Technologie zur Beschleunigung dieser Vorgänge eingesetzt werden. In diesem Artikel werden die grundlegenden Konzepte und Prinzipien der asynchronen PHP-Koroutine vorgestellt und spezifische Codebeispiele bereitgestellt. 1. Das Konzept und Prinzip der asynchronen Coroutine Asynchrone Coroutine ist eine effiziente gleichzeitige Programmiertechnologie, die einen einzelnen Thread verwendet, um eine einfache Aufgabenplanung und Zusammenarbeit zu erreichen. Im Vergleich zur herkömmlichen Multithread- oder Multiprozess-Parallelprogrammierung
So verwenden Sie die asynchrone Anforderungsfunktion in der Vue-Dokumentation
Jun 20, 2023 pm 05:55 PM
Vue.js ist ein beliebtes Front-End-JavaScript-Framework, das eine Möglichkeit bietet, Benutzeroberflächen in Ihren Anwendungen zu erstellen. In der Vue.js-Dokumentation finden wir viele nützliche Informationen, insbesondere zur Verwendung asynchroner Anforderungsfunktionen. Asynchrone Anforderungsfunktionen sind eine Möglichkeit, asynchrone Aufgaben in einer Anwendung auszuführen. Sie werden verwendet, um Daten vom Server abzurufen, Eingaben zu verarbeiten, Formulare zu validieren usw. Im Allgemeinen müssen asynchrone Anforderungsfunktionen mit Java-Funktionen wie Promise, Async und Wait kombiniert werden.
Wie Swoole asynchrone AMQP-Vorgänge unterstützt
Jun 25, 2023 am 08:22 AM
Da das Volumen des Internetgeschäfts weiter wächst, wird die Nachfrage nach hoher Parallelität und hoher Leistung immer größer, und Swoole wird als Netzwerkkommunikations-Framework für PHP immer mehr von Entwicklern bevorzugt. Unter anderem unterstützt Swoole asynchrones AMQP, eines der häufigsten Anwendungsszenarien. Schauen wir uns also an, wie Swoole asynchrone AMQP-Vorgänge unterstützt. Zunächst müssen wir klären, was AMQP ist. AMQP (AdvancedMessageQueuingProtocol) Erweitert
Asynchroner Datenaustausch mithilfe von Ajax-Funktionen
Jan 26, 2024 am 09:41 AM
So verwenden Sie Ajax-Funktionen, um eine asynchrone Dateninteraktion zu erreichen. Mit der Entwicklung der Internet- und Webtechnologie ist die Dateninteraktion zwischen dem Front-End und dem Back-End sehr wichtig geworden. Herkömmliche Dateninteraktionsmethoden wie Seitenaktualisierung und Formularübermittlung können die Benutzeranforderungen nicht mehr erfüllen. Ajax (Asynchronous JavaScript and XML) ist zu einem wichtigen Werkzeug für die asynchrone Dateninteraktion geworden. Ajax ermöglicht dem Web die Verwendung von JavaScript und dem XMLHttpRequest-Objekt
Asynchrone und nicht blockierende Technologie in der Java-Ausnahmebehandlung
May 01, 2024 pm 05:42 PM
Asynchrone und nicht blockierende Techniken können als Ergänzung zur herkömmlichen Ausnahmebehandlung verwendet werden und ermöglichen die Erstellung reaktionsschnellerer und effizienterer Java-Anwendungen: Asynchrone Ausnahmebehandlung: Behandlung von Ausnahmen in einem anderen Thread oder Prozess, sodass der Hauptthread weiter ausgeführt werden kann und Blockierungen vermieden werden. Nicht blockierende Ausnahmebehandlung: Beinhaltet eine ereignisgesteuerte Ausnahmebehandlung, wenn ein E/A-Vorgang fehlschlägt, wodurch das Blockieren von Threads vermieden wird und die Ereignisschleife die Behandlung von Ausnahmen ermöglicht.
