Marquee
模仿IE下面的marquee效果，鼠標移上去暫停。形成環的主要原理在於每張圖片一旦判斷出了外面的顯示窗口就添加到尾部，用append和prepend模擬數組的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標簽效果的簡單實現</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){
//定義構造函數
var BoxObj=function(ele,opt){
this.$element=ele; //最外層對象
this.defaults={
'style': 0 ,//滾動樣式選擇,默認為普通效果
'speed': 1 ,//默認為1s
'direction': 'left'//默認為向左邊滾動
},
this.options=$.extend({},this.defaults,opt );
//這裡可以添加一些通用方法
}
//給構造函數添加方法
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));//將第一項放在最後，相當於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));//將最後一項放在最前，相當於pop(last),unshift()
}else{
$(obj).scrollLeft(step);
}
}else{//不執行之外的數值
}
}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){
//創建實體
var boxObj=new BoxObj(this,options);
//用尾調的形式調用對象方法
return boxObj.commonScroll();
}
})(jQuery,window,document);
詳細下載見https://github.com/codetker/myMarquee
以上所述就是本文的全部內容了，希望大家能夠喜歡。