jQuery動畫效果實現(xiàn)圖片無縫連續(xù)滾動
本文實例介紹了jQuery動畫效果實現(xiàn)圖片無縫連續(xù)滾動的詳細代碼,分享給大家供大家參考,具體內(nèi)容如下
效果圖如下:
一、HTML代碼
<body> <div id="container"> <ul id="content"> <li><a href="#"><img src="images/0.png"/></a></li> <li><a href="#"><img src="images/1.png"/></a></li> <li><a href="#"><img src="images/tewu.png"/></a></li> <li><a href="#"><img src="images/2.png"/></a></li> <li><a href="#"><img src="images/tewu.png"/></a></li> <li><a href="#"><img src="images/3.png"/></a></li> <li><a href="#"><img src="images/4.png"/></a></li> </ul> </div> </body>
1. id為container的div是最外層的包裝,用來控制滾動區(qū)域顯示的具體位置。
2. id為content的ul用來包裝那些需要滾動的圖片。
3. li元素就是用來包裝具體的圖片。
二、CSS代碼
*{margin: 0; padding: 0;} img{ border:0; } #container{ width:800px; height: 130px; <span style="white-space:pre"> </span>margin:100px auto; border:3px solid blue; overflow: hidden; position: relative; } #container ul{ list-style: none; width:10000px; position: absolute; } #container ul li{ float:left; margin-right: 20px; }
這里說明一點,ul 的 width為什么設置為10000px。 因為無縫連續(xù)滾動的實現(xiàn)原理,就是在現(xiàn)有顯示圖片的基礎上克隆一份,并且拼接在顯示圖片的后面,但由于顯示圖片的總寬度是未知的,所以為了安全性,最好將ul的width寬度設置比較大些。
三、無縫連續(xù)滾動原理分析
四、JQuery實現(xiàn)代碼
<script type="text/javascript"> /* window.onload比 $(function(){}) 加載的更晚一些,這樣那些寬度的計算在Chrome中就可以準確計算了*/ window.onload = function(){ /*計算一個segment的寬度*/ var segmentWidth = 0; $("#container #content li").each(function(){ segmentWidth+= $(this).outerWidth(true); }); $("#container #content li").clone().appendTo($("#container #content")); run(6000); function run(interval){ $("#container #content").animate({"left":-segmentWidth}, interval,"linear",function(){ $("#container #content").css("left",0); run(6000); }); } $("#container").mouseenter(function(){ $("#container #content").stop(); }).mouseleave(function(){ var passedCourse = -parseInt($("#container #content").css("left")); var time = 6000 * (1 - passedCourse/segmentWidth); run(time); }); }; </script>
1. 先通過each遍歷所有的li元素,計算出它們寬度之和。
2. 拷貝一份圖片到現(xiàn)有圖片的后面,原理分析圖的"圖一"所示。
3. 設置6秒鐘滾動完界面上面現(xiàn)有的圖片,滾動完畢后,通過設置content的left值,將其整體拉回到初始狀態(tài),原理分析圖的"圖二"所示。然后遞歸調(diào)用run方法,完成無限滾動。
4. 當鼠標經(jīng)過滾動區(qū)域的時候,動畫立刻停止; 當鼠標離開的時候,動畫繼續(xù)執(zhí)行。
關于動畫繼續(xù)執(zhí)行的代碼,如下圖分析:
以上就是jQuery實現(xiàn)圖片無縫連續(xù)滾動的代碼,希望對大家的學習有所幫助。
相關文章
10個基于jQuery或JavaScript的WYSIWYG 編輯器整理
10驚人的自由豐富的文本編輯器,將提升您的網(wǎng)站的功能。我已經(jīng)收集了5 jQuery和5個非jQuery實時評價附帶簡單的功能,具有辦公一樣的功能。2010-05-05基于jquery實現(xiàn)動態(tài)豎向柱狀條特效
很多數(shù)據(jù)統(tǒng)計效果中,柱狀條方式的算是比較常見的一種,形象直觀,下面就是一段能夠?qū)崿F(xiàn)此功能的代碼實例,并且具有一定的動態(tài)效果,感興趣的朋友可以參考一下2016-02-02Jquery Ajax學習實例3 向WebService發(fā)出請求,調(diào)用方法返回數(shù)據(jù)
Jquery Ajax學習實例3 向WebService發(fā)出請求,調(diào)用方法返回數(shù)據(jù)2010-03-03jQuery控制DIV層實現(xiàn)由大到小,由遠及近動畫變化效果
這篇文章主要介紹了jQuery控制DIV層實現(xiàn)由大到小,由遠及近動畫變化效果,涉及jQuery基于animate方法操作頁面元素實現(xiàn)動畫漸變效果的相關技巧,需要的朋友可以參考下2015-10-10jquery實現(xiàn)在光標位置插入內(nèi)容的方法
這篇文章主要介紹了jquery實現(xiàn)在光標位置插入內(nèi)容的方法,涉及jQuery功能的擴展技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02