jQuery實現(xiàn)模擬marquee標(biāo)簽效果
Marquee
模仿IE下面的marquee效果,鼠標(biāo)移上去暫停。形成環(huán)的主要原理在于每張圖片一旦判斷出了外面的顯示窗口就添加到尾部,用append和prepend模擬數(shù)組的push()和shift()。
代碼如下:
HTML
<!doctype html> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta content="" name="keywords" /> <meta content="" name="description" /> <meta name="author" content="codetker" /> <head> <title>模擬marquee標(biāo)簽效果的簡單實現(xiàn)</title> <link href="style/reset.css" rel="stylesheet" type="text/css"> <link href="style/style.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="js/jquery.codetker.marquee.js"></script> </head> <body> <div class="wrap"> <div class="marquee"> <ul> <li> <a href="" title="">1 <img src="images/test.jpg" alt=""> </a> </li> <li> <a href="" title="">2 <img src="images/test.jpg" alt=""> </a> </li> <li> <a href="" title="">3 <img src="images/test.jpg" alt=""> </a> </li> <li> <a href="" title="">4 <img src="images/test.jpg" alt=""> </a> </li> <li> <a href="" title="">5 <img src="images/test.jpg" alt=""> </a> </li> <li> <a href="" title="">6 <img src="images/test.jpg" alt=""> </a> </li> <li> <a href="" title="">7 <img src="images/test.jpg" alt=""> </a> </li> <li> <a href="" title="">8 <img src="images/test.jpg" alt=""> </a> </li> </ul> </div> </div> <script type="text/javascript"> $(document).ready(function(){ $(".marquee").marquee(); }); </script> </body> </html>
CSS
@charset "utf-8"; /* CSS Document */ body{ margin:0 0; padding:0 0; height:100%; width:100%; } .wrap{ font-family:"微軟雅黑","宋體", Times, "Times New Roman", serif; font-size:14px; margin:0 0; padding:0 0; height:100%; width:100%; overflow:hidden; } .marquee{ margin: 0 auto; width: 960px; height: 300px; overflow: hidden; } .marquee ul{ width: 10000px; } .marquee ul li{ float: left; width: 500px; text-align: center; } .marquee ul li a{ } .marquee ul li a:hover{ color: red; }
JavaScript
/* * boxScroll 0.1 * 兼容IE8,FF,Chrome等常見瀏覽器 */ ;(function($,window,document,undefined){ //定義構(gòu)造函數(shù) var BoxObj=function(ele,opt){ this.$element=ele; //最外層對象 this.defaults={ 'style': 0 ,//滾動樣式選擇,默認為普通效果 'speed': 1 ,//默認為1s 'direction': 'left'//默認為向左邊滾動 }, this.options=$.extend({},this.defaults,opt ); //這里可以添加一些通用方法 } //給構(gòu)造函數(shù)添加方法 BoxObj.prototype={ commonScroll:function(){ //接收對象屬性 var obj=this.$element; var boxWindow=$(this.$element).children('ul'); var speed=this.defaults.speed; var style=this.defaults.style; var direction=(this.defaults.direction=='left')? 1 : -1; var lists=$(boxWindow).children('li'); var len=$(lists).length; var boxWidth=$(lists[0]).width(); var timer; var step=(this.defaults.direction=='left')? 0 : boxWidth; function move(style,speed,direction){ if (style==0) { if (direction==1) { step+=1; if(step>boxWidth){ step-=boxWidth; $(boxWindow).append($(boxWindow).children().eq(0));//將第一項放在最后,相當(dāng)于push(0),shift() }else{ $(obj).scrollLeft(step); } }else if (direction== -1) { step-=1; if(step<0){ step+=boxWidth; $(boxWindow).prepend($(boxWindow).children().eq(len-1));//將最后一項放在最前,相當(dāng)于pop(last),unshift() }else{ $(obj).scrollLeft(step); } }else{//不執(zhí)行之外的數(shù)值 } }else{//留待擴展,多了改switch } } timer=setInterval(function(){ move(style,speed,direction); },10*speed); //由于時間取得小,肉眼就看不出來 $(lists).each(function() {//鼠標(biāo)移上暫停 $(this).hover(function() { clearInterval(timer); }, function() { clearInterval(timer); timer=setInterval(function(){ move(style,speed,direction); },10*speed); }); }); } } $.fn.marquee=function(options){ //創(chuàng)建實體 var boxObj=new BoxObj(this,options); //用尾調(diào)的形式調(diào)用對象方法 return boxObj.commonScroll(); } })(jQuery,window,document);
詳細下載見https://github.com/codetker/myMarquee
以上所述就是本文的全部內(nèi)容了,希望大家能夠喜歡。
相關(guān)文章
jquery+css3實現(xiàn)的經(jīng)典彈出層效果示例
這篇文章主要介紹了jquery+css3實現(xiàn)的經(jīng)典彈出層效果,結(jié)合實例形式分析了jquery+css3實現(xiàn)彈出層具體原理、步驟與相關(guān)操作技巧,需要的朋友可以參考下2020-05-05使用jquery實現(xiàn)select添加實現(xiàn)后臺權(quán)限添加的效果
使用jquery實現(xiàn)select添加實現(xiàn)后臺權(quán)限添加的效果,需要的朋友可以參考下。2011-05-05jquery實現(xiàn)加載更多"轉(zhuǎn)圈圈"效果(示例代碼)
這篇文章主要介紹了jquery實現(xiàn)加載更多"轉(zhuǎn)圈圈"效果,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-11-11jquery+CSS3實現(xiàn)淘寶移動網(wǎng)頁菜單效果
這篇文章主要介紹了jquery+CSS3實現(xiàn)淘寶移動網(wǎng)頁菜單效果,實例分析了jquery操作頁面樣式動態(tài)變換及熱區(qū)的選擇技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08jQuery實現(xiàn)動態(tài)顯示select下拉列表數(shù)據(jù)的方法
這篇文章主要介紹了jQuery實現(xiàn)動態(tài)顯示select下拉列表數(shù)據(jù)的方法,涉及jQuery針對json數(shù)據(jù)的讀取、遍歷及頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2018-02-02jQuery函數(shù)的第二個參數(shù)獲取指定上下文中的DOM元素
這篇文章主要介紹了jQuery函數(shù)的第二個參數(shù)獲取指定上下文中的DOM元素,需要的朋友可以參考下2014-05-05基于jQuery對象和DOM對象和字符串之間的轉(zhuǎn)化實例
下面小編就為大家?guī)硪黄趈Query對象和DOM對象和字符串之間的轉(zhuǎn)化實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-08-08