Marquee
模仿IE下面的marquee效果，鼠標移上去暫停。形成環(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標簽效果的簡單實現(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() {//鼠標移上暫停 $(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)容了，希望大家能夠喜歡。
新聞熱點
疑難解答
