interface Web
js tutoriel
jquery version diluée de la bannière image asynchrone effet de texte commutation d'image effets spéciaux_jquery
jquery version diluée de la bannière image asynchrone effet de texte commutation d'image effets spéciaux_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></body> <br> 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>@Titre : Version édulcorée de la bannière avec description du titre et petit bouton <br>@Heure : 22.11.2013 <br>@Source : BENZI.PW <br>@Description : <br> <br> Comment utiliser le plug-in : <br>Veuillez copier complètement le CSS HTML avant utilisation.<br>benzi.bzBanner(); <br><br>Les appels d'objets sont tous modifiés dans js<br>conteneur : cadre le plus externe<br>cols : tout le contenu<br>btns : tous les petits boutons<br>act : Button nom du style d'activation <br>pre : bouton de défilement vers l'avant <br>suivant : bouton de défilement vers l'arrière <br><br><br>====*/ <br>var benzi = { <br>bzBanner: function (){ <br><br>//Tous les paramètres sont initialisés (seront supprimés après encapsulation) <br>var valeurs = { <br>container:$('.bzBanner'), <br>cols:$('. bzBanner .col'), <br>btns:$('.bzBanner .btn i'), <br>act:'act', <br>pre:$('.bzBanner .pre'), <br>suivant : $('.bzBanner .next'), <br>now:0 <br>} <br><br>//Effet de fondu, définissez le zindex de tous les objets individuels, et affichez et masquez <br>// col : all Content object <br> // pre : objet précédent <br> // now : objet actuellement affiché <br> // ----------------------- - <br>var affaiblir = function( pre,now ){ <br>var col = valeurs.cols; <br>col.css({ zIndex:1 }).eq( pre ).css({ zIndex:2 } ); <br>col.eq( now ).css({ zIndex:3,opacity:0 }).stop(true).animate({ opacity:1 },700 <br>} <br>//Calcul incrémental, renvoie le contenu affiché précédent et le contenu actuel à afficher<br>//maintenant : l'index actuellement sélectionné<br>//---------------- --- <br>var augmentation = function( now ){ <br>var pre = now ,now = pre 1 <br>if( now >=values.cols.length ) now = 0; { pre:pre ,now:now }; <br>} <br><br>//Calcul décroissant<br>//------------------ <br> var régression = function( now ){ <br>var pre = now ,now = pre - 1; <br>if( now < 0 ) now = valeurs.cols.length-1 <br>return { pre: pre ,now:now }; <br>} <br><br>//Modifier le style du petit bouton<br>//--------------------- <br>var btnStyle = function( maintenant ){ <br>if( valeurs.btns && valeurs.act ) <br>values.btns.removeClass( valeurs.act ).eq( maintenant ).addClass( valeurs.act ); 🎜>} <br><br>//Hook d'événement petit bouton, s'il y a un petit bouton dans l'initialisation, il sera exécuté, sinon il ne sera pas exécuté <br>//-------- -------- ------ <br>var bouton = function(){ <br>values.btns.click(function(){ <br>var maintenant = $(this).index( ); <br>if( valeurs .now != maintenant ){ <br>weaken( valeurs.now ,now ); <br>btnStyle( maintenant ); maintenant ; <br>} <br>}); <br>} <br><br>//Changement de contenu<br>// aspect : direction, 0 ou aucune valeur signifie un retournement vers l'arrière, 1 signifie un retournement vers l'avant<br> //------ ---------------- <br>var change = function( aspect ){ <br>var val = aspect ? augmenter( valeurs.now ); <br>affaiblir( val.pre ,val.now ); <br>btnStyle( val.now ); <br>text( val.now ); maintenant; <br>} <br><br>//Effets des boutons gauche et droit<br>//----------------------- <br> var raccourci = function(){ <br>values.pre.click(function(){change(1); }); <br>values.next.click(function(){change(); }); >} <br><br>// Effet de changement de texte, cet effet est très ciblé et nécessite un support de style <br>//--------------------- <br>var text = function (maintenant){ <br>values.cols.find('span').css({ opacity:0 }).eq( maintenant ).stop(true).delay(500).animate( { opacité:1 }, 1000); <br>values.cols.find('h3').css({ opacité:0 }).eq( now ).stop(true).delay(500).animate({ opacité:1 },500 ); <br>values.cols.find('p').css({ opacité:0 }).eq( now ).stop(true).delay(1000).animate({ opacité :1 },500) ; <br>} <br><br>//Taille du cadre<br>//------------------------ -------- - <br>$(window).resize(function(){ <br>values.container.height(values.cols.find('img').height() ); <br>}).resize(); <br><br>//Lecture automatique, la méthode des degrés récupère les paramètres correspondants, modifie le style du petit bouton (s'il y a un petit bouton), puis actualise les valeurs des variables globales. maintenant <br>// time : temps de retard<br> //--------------------- <br>var loop,play = function( time ){ <br>clearTimeout( loop ); <br>loop = setTimeout (function(){ <br>change(); <br>play( 3000 ); <br>}, time ); >//Pause et déclenchement de la lecture automatique<br>// --------------------- <br>var control = function(){ <br>values.container .hover(function(){ <br>clearTimeout( loop ); <br>},function(){ <br>play( 2000 ); <br>} <br><br>// Initialisez l'effet et appelez chaque fonction <br>//-- ------------------ <br>var initialize = function(){ <br>var now = valeurs. maintenant; <br>affaiblir (values.cols.length-1 ,now ); <br>if(values.btns ) bouton(); <br>if(values.pre && values.next ) raccourci(); >btnStyle( maintenant ); <br>text( maintenant ); <br>play( 4000 ); <br>control(); <br><br>//Appel d'initialisation<br>//-- ---------- ----- <br>initialize(); <br><br>} <br><br>} <br>< br> < pré> ;/pre>
;pré>
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
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
Application rapide : analyse de cas de développement pratique du téléchargement HTTP asynchrone PHP de plusieurs fichiers
Sep 12, 2023 pm 01:15 PM
Application rapide : analyse de cas de développement pratique de PHP Téléchargement HTTP asynchrone de plusieurs fichiers Avec le développement d'Internet, la fonction de téléchargement de fichiers est devenue l'un des besoins fondamentaux de nombreux sites Web et applications. Pour les scénarios dans lesquels plusieurs fichiers doivent être téléchargés en même temps, la méthode de téléchargement synchrone traditionnelle est souvent inefficace et prend du temps. Pour cette raison, utiliser PHP pour télécharger plusieurs fichiers de manière asynchrone via HTTP est devenu une solution de plus en plus courante. Cet article analysera en détail comment utiliser le HTTP asynchrone PHP à travers un cas de développement réel.
Comment Swoole prend en charge les opérations SMTP asynchrones
Jun 25, 2023 pm 12:24 PM
Avec le développement et la vulgarisation continus d'Internet, le courrier électronique est devenu un élément indispensable de la vie et du travail des gens, et SMTP (Simple Mail Transfer Protocol) est l'un des protocoles importants pour l'envoi de courrier électronique. En tant que framework de communication réseau asynchrone pour PHP, Swoole peut bien prendre en charge les opérations SMTP asynchrones, rendant l'envoi d'e-mails plus efficace et plus stable. Cet article présentera comment Swoole prend en charge les opérations SMTP asynchrones, notamment l'utilisation
Guide avancé de Python asyncio : du débutant à l'expert
Mar 04, 2024 am 09:43 AM
Programmation simultanée et asynchrone La programmation simultanée traite de plusieurs tâches s'exécutant simultanément, la programmation asynchrone est un type de programmation simultanée dans laquelle les tâches ne bloquent pas les threads. asyncio est une bibliothèque de programmation asynchrone en python, qui permet aux programmes d'effectuer des opérations d'E/S sans bloquer le thread principal. Boucle d'événements Le cœur d'asyncio est la boucle d'événements, qui surveille les événements d'E/S et planifie les tâches correspondantes. Lorsqu'une coroutine est prête, la boucle d'événements l'exécute jusqu'à ce qu'elle attende les opérations d'E/S. Il met ensuite la coroutine en pause et continue d'exécuter d'autres coroutines. Coroutines Les coroutines sont des fonctions qui peuvent suspendre et reprendre l'exécution. Le mot-clé asyncdef est utilisé pour créer des coroutines. La coroutine utilise le mot-clé wait pour attendre la fin de l'opération d'E/S. Les bases suivantes d'asyncio
Comment Swoole prend en charge les opérations AMQP asynchrones
Jun 25, 2023 am 08:22 AM
À mesure que le volume des activités Internet continue de croître, la demande de haute concurrence et de hautes performances augmente de plus en plus, et Swoole, en tant que cadre de communication réseau pour PHP, est de plus en plus favorisé par les développeurs. Parmi eux, Swoole prend en charge l'AMQP asynchrone, qui est l'un des scénarios d'application les plus courants. Voyons donc comment Swoole prend en charge les opérations AMQP asynchrones. Tout d’abord, nous devons clarifier ce qu’est l’AMQP. AMQP (AdvancedMessageQueuingProtocol) Avancé
Développement de coroutines asynchrones PHP : accélère la mise en cache des données et les opérations de lecture et d'écriture
Dec 18, 2023 pm 01:09 PM
Développement de coroutines asynchrones PHP : accélération de la mise en cache des données et des opérations de lecture et d'écriture. Dans le développement d'applications réel, la mise en cache des données et les opérations de lecture et d'écriture sont des goulots d'étranglement courants en termes de performances. Afin d'améliorer l'efficacité du système et l'expérience utilisateur, la technologie de coroutine asynchrone PHP peut être utilisée pour accélérer ces opérations. Cet article présentera les concepts et principes de base des coroutines asynchrones PHP et fournira des exemples de code spécifiques. 1. Le concept et le principe de la coroutine asynchrone La coroutine asynchrone est une technologie de programmation simultanée efficace qui utilise un seul thread pour réaliser une planification et une collaboration légères des tâches. Par rapport à la programmation simultanée multithread ou multiprocessus traditionnelle
Comment utiliser la fonction de requête asynchrone dans la documentation Vue
Jun 20, 2023 pm 05:55 PM
Vue.js est un framework JavaScript frontal populaire qui permet de créer des interfaces utilisateur dans vos applications. Dans la documentation de Vue.js, nous pouvons trouver de nombreuses informations utiles, notamment sur la façon d'utiliser les fonctions de requête asynchrone. Les fonctions de requête asynchrone sont un moyen d'effectuer des tâches asynchrones dans une application. Ils sont utilisés pour obtenir des données du serveur, traiter les saisies, valider des formulaires, etc. De manière générale, les fonctions de requête asynchrone doivent être combinées avec des fonctions Java telles que Promise, async et wait.
Comment utiliser ThinkPHP6 pour les opérations de journalisation asynchrone ?
Jun 12, 2023 am 09:57 AM
Avec le développement rapide d'Internet, les services de journalisation sont devenus un module essentiel pour toute application Web à grande échelle. Afin de faciliter divers besoins tels que le dépannage des erreurs et la surveillance des performances, cet article explique comment utiliser le framework ThinkPHP6 pour effectuer des opérations de journalisation asynchrone. 1. Qu'est-ce que la journalisation ? Dans le domaine de l'informatique, la journalisation fait référence à l'enregistrement d'événements et d'informations qui se produisent dans un système informatique. Généralement, ces enregistrements sont stockés dans des fichiers ou des bases de données. La journalisation permet de comprendre l'état de fonctionnement du système, de détecter et de résoudre les problèmes en temps opportun
Échange de données asynchrone à l'aide des fonctions Ajax
Jan 26, 2024 am 09:41 AM
Comment utiliser les fonctions Ajax pour réaliser une interaction de données asynchrone Avec le développement de la technologie Internet et Web, l'interaction des données entre le front-end et le back-end est devenue très importante. Les méthodes traditionnelles d’interaction avec les données, telles que l’actualisation des pages et l’envoi de formulaires, ne peuvent plus répondre aux besoins des utilisateurs. Ajax (JavaScript asynchrone et XML) est devenu un outil important pour l'interaction de données asynchrones. Ajax permet au Web d'utiliser JavaScript et l'objet XMLHttpRequest
