Web Front-end
JS Tutorial
jquery diluted version of banner asynchronous picture text effect switching picture special effects_jquery
jquery diluted version of banner asynchronous picture text effect switching picture special effects_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> <br><script type="text/ javascript" src="./bzBanner.min.js" ></script> <br><script type="text/javascript"> <br>$(function(){ benzi.bzBanner(); }); <br></script> <br></body> <br></html> ----------html----------------- -------------------------------------------------- --------------
<pre code_snippet_id=" 280064" snippet_file_name="blog_20140408_2_455436" name="code" class="javascript">/*================================ ===== <br>@Title: diluted version of banner with title description and small button <br>@Time: 2013.11.22 <br>@Source: BENZI.PW <br>@Description: <br><br> How to use the plug-in: <br>Please copy the CSS HTML completely before use.<br>benzi.bzBanner(); <br><br>Object calls are all changed in js<br>container: outermost frame<br>cols: all content<br>btns: all small buttons<br>act: Button activation style name <br>pre: Scroll forward button <br>next: Scroll backward button <br><br><br>====*/ <br>var benzi = { <br>bzBanner: function (){ <br><br>//All parameters are initialized (will be deleted after encapsulation) <br>var values = { <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 effect, set zindex of all individual objects, and show and hide <br>// col: all Content object <br> // pre: previous object <br> // now: currently displayed object <br> // ----------------------- - <br>var weaken = function( pre,now ){ <br>var col = values.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><br>//Incremental calculation, return the previous displayed content and the current content to be displayed<br>// now: the currently selected index<br>//---------------- --- <br>var increase = function( now ){ <br>var pre = now ,now = pre 1; <br>if( now >= values.cols.length ) now = 0; <br>return { pre:pre ,now:now }; <br>} <br><br>//Decreasing calculation<br>//------------------ <br>var regression = function( now ){ <br>var pre = now ,now = pre - 1; <br>if( now < 0 ) now = values.cols.length-1; <br>return { pre: pre ,now:now }; <br>} <br><br>//Modify the small button style<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><br>//Small button event hook, if there is a small button in the initialization, it will be executed, otherwise it will not be executed <br>//---------------- ------ <br>var button = function(){ <br>values.btns.click(function(){ <br>var now = $(this).index(); <br>if( values .now != now ){ <br>weaken( values.now ,now ); <br>btnStyle( now ); <br>text( now ); <br>values.now = now; <br>} <br>}); <br>} <br><br>//Content switching<br>// aspect: direction, 0 or no value means backward flipping, 1 means forward flipping<br>//------ ---------------- <br>var change = function( aspect ){ <br>var val = aspect ? regression( values.now ) : increase( values.now ); <br>weaken( val.pre ,val.now ); <br>btnStyle( val.now ); <br>text( val.now ); <br>values.now = val.now; <br>} <br><br>//Left and right button effects<br>//----------------------- <br>var shortcut = function(){ <br> values.pre.click(function(){ change(1); }); <br>values.next.click(function(){ change(); }); <br>} <br><br>// Text switching effect, this effect is very targeted and requires style support <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>//Frame size<br>//-------------------------------- - <br>$(window).resize(function(){ <br>values.container.height( values.cols.find('img').height() ); <br>}).resize(); <br><br>//Auto play, the degrees method gets the corresponding parameters, and modifies the small button style (if there is a small button), and then refreshes the global variable values.now <br>// time: delay time<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 and trigger automatic play<br>// --------------------- <br>var control = function(){ <br>values.container.hover(function(){ <br>clearTimeout( loop ); <br>},function(){ <br>play( 2000 ); <br>}); <br>} <br><br>//Initialize the effect and call each function <br>//-- ------------------ <br>var initialize = function(){ <br>var now = values.now; <br>weaken( values.cols.length-1 ,now ); <br>if(values.btns ) button(); <br>if( values.pre && values.next ) shortcut(); <br>btnStyle( now ); <br>text( now ); <br>play( 4000 ); <br>control(); <br>} <br><br>//Initialization call<br>//---------------- ----- <br>initialize(); <br><br>} <br><br>} <br>< pre>
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1359
52
Quick Application: Practical Development Case Analysis of PHP Asynchronous HTTP Download of Multiple Files
Sep 12, 2023 pm 01:15 PM
Quick Application: Practical Development Case Analysis of PHP Asynchronous HTTP Download of Multiple Files With the development of the Internet, the file download function has become one of the basic needs of many websites and applications. For scenarios where multiple files need to be downloaded at the same time, the traditional synchronous download method is often inefficient and time-consuming. For this reason, using PHP to download multiple files asynchronously over HTTP has become an increasingly common solution. This article will analyze in detail how to use PHP asynchronous HTTP through an actual development case.
How Swoole supports asynchronous SMTP operations
Jun 25, 2023 pm 12:24 PM
With the continuous development and popularization of the Internet, email has become an indispensable part of people's lives and work, and SMTP (Simple Mail Transfer Protocol) is one of the important protocols for email sending. As an asynchronous network communication framework for PHP, Swoole can well support asynchronous SMTP operations, making email sending more efficient and stable. This article will introduce how Swoole supports asynchronous SMTP operations, including using sync
Advanced Guide to Python asyncio: From Beginner to Expert
Mar 04, 2024 am 09:43 AM
Concurrent and Asynchronous Programming Concurrent programming deals with multiple tasks executing simultaneously, asynchronous programming is a type of concurrent programming in which tasks do not block threads. asyncio is a library for asynchronous programming in python, which allows programs to perform I/O operations without blocking the main thread. Event loop The core of asyncio is the event loop, which monitors I/O events and schedules corresponding tasks. When a coroutine is ready, the event loop executes it until it waits for I/O operations. It then pauses the coroutine and continues executing other coroutines. Coroutines Coroutines are functions that can pause and resume execution. The asyncdef keyword is used to create coroutines. The coroutine uses the await keyword to wait for the I/O operation to complete. The following basics of asyncio
How Swoole supports asynchronous AMQP operations
Jun 25, 2023 am 08:22 AM
As the volume of Internet business continues to grow, the demand for high concurrency and high performance is getting higher and higher, and Swoole, as a network communication framework for PHP, is increasingly favored by developers. Among them, Swoole supports asynchronous AMQP, which is one of the more common application scenarios. So let's take a look at how Swoole supports asynchronous AMQP operations. First, we need to clarify what AMQP is. AMQP (AdvancedMessageQueuingProtocol) Advanced
PHP asynchronous coroutine development: speed up data caching and read and write operations
Dec 18, 2023 pm 01:09 PM
PHP asynchronous coroutine development: accelerating data caching and read and write operations. In actual application development, data caching and read and write operations are common performance bottlenecks. In order to improve system efficiency and user experience, PHP asynchronous coroutine technology can be used to accelerate these operations. This article will introduce the basic concepts and principles of PHP asynchronous coroutines and provide specific code examples. 1. The concept and principle of asynchronous coroutine Asynchronous coroutine is an efficient concurrent programming technology that uses a single thread to achieve lightweight task scheduling and collaboration. Compared with traditional multi-threaded or multi-process concurrent programming
How to use the asynchronous request function in the Vue documentation
Jun 20, 2023 pm 05:55 PM
Vue.js is a popular front-end JavaScript framework that provides a way to build user interfaces in your applications. In the Vue.js documentation, we can find a lot of useful information, especially about how to use asynchronous request functions. Asynchronous request functions are a way to perform asynchronous tasks in an application. They are used to get data from the server, process input, validate forms, etc. Generally speaking, asynchronous request functions need to be combined with Java functions such as Promise, async and await.
How to use ThinkPHP6 for asynchronous logging operations?
Jun 12, 2023 am 09:57 AM
With the rapid development of the Internet, logging services have become an essential module for every large-scale web application. In order to facilitate various needs such as error troubleshooting and performance monitoring, this article will introduce how to use the ThinkPHP6 framework to perform asynchronous logging operations. 1. What is logging? In the field of computer science, logging refers to recording events and information that occur in a computer system. Typically, these records are stored in files or databases. Logging helps to understand the system operating status, detect and solve problems in a timely manner
Asynchronous data exchange using Ajax functions
Jan 26, 2024 am 09:41 AM
How to use Ajax functions to achieve asynchronous data interaction With the development of the Internet and Web technology, data interaction between the front end and the back end has become very important. Traditional data interaction methods, such as page refresh and form submission, can no longer meet user needs. Ajax (Asynchronous JavaScript and XML) has become an important tool for asynchronous data interaction. Ajax enables the web to use JavaScript and the XMLHttpRequest object
