纯javascript实现四方向文本无缝滚动效果
实现一个文本无缝滚动的效果：
<!DOCTYPEhtml>
<!--[ifltIE7]><htmllang="zh-CN"class="ie6"><![endif]-->
<!--[ifIE7]><htmllang="zh-CN"class="ie7"><![endif]-->
<!--[ifIE8]><htmllang="zh-CN"class="ie8"><![endif]-->
<!--[ifIE9]><htmllang="zh-CN"class="ie9"><![endif]-->
<!--[if(gtIE9)|!(IE)]><!--><htmllang="zh-CN"><!--<![endif]-->
<head>
<title>文字滚动</title>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/>
<styletype="text/css">
*{margin:0;padding:0;}
body{padding:20px;}
.textbox{border:1pxsolid#ddd;width:auto;overflow:hidden;}
.textboxul{list-style:none;position:relative;}
.textboxulli{padding:5px0;}
</style>
</head>
<bodyclass="home-page">
<divid="textbox"class="textbox">
<ul>
<li>汽车|运动B级车降3万5</li>
<li>家居|这么厉害的装修女人真的要坐不住了</li>
<li>教育|各省前三报考华工重奖10万元/人</li>
<li>汽车|运动B级车降3万5平行进口车加价11万</li>
<li>健康|滥用激素酿苦果14岁男孩10年不长个儿</li>
<li>数码|最新手机报价说好的宽带降费提速呢？</li>
<li>汽车|平行进口车加价11万</li>
<li>汽车|运动B级车降3万5</li>
<li>汽车|平行进口车加价11万</li>
<li>运动|恒大亚冠生死战猜比分赢正版球衣</li>
</ul>
<ahref="#"class="btnPrev">向左</a>
<ahref="#"class="btnNext">向右</a>
</div>
<br>
<br>
<divid="textbox2"class="textbox">
<ul>
<li>汽车|运动B级车降3万5</li>
<li>家居|这么厉害的装修女人真的要坐不住了</li>
<li>教育|各省前三报考华工重奖10万元/人</li>
<li>汽车|运动B级车降3万5平行进口车加价11万</li>
<li>健康|滥用激素酿苦果14岁男孩10年不长个儿</li>
<li>数码|最新手机报价说好的宽带降费提速呢？</li>
<li>汽车|平行进口车加价11万</li>
<li>汽车|运动B级车降3万5</li>
<li>汽车|平行进口车加价11万</li>
<li>运动|恒大亚冠生死战猜比分赢正版球衣</li>
</ul>
<ahref="#"class="btnPrev">向上</a>
<ahref="#"class="btnNext">向下</a>
</div>
<scripttype="text/javascript"src="script/jquery-1.11.1.min.js"></script>
<scripttype="text/javascript">
//四方向无缝滚动
scroll('#textbox',{vis:2,btnHidden:false,dir:'prev',type:'h'});
scroll('#textbox2',{vis:3,btnHidden:false,dir:'prev',type:'v'});
functionscroll(container,options){
varbox=$(container);
varboxUl=box.find('ul').eq(0);
varLiHeight=0;//不包含克隆li列表高度
varcloneLiHeight=0;//包含克隆li列表高度
varLiWidth=0;//不包含克隆li列表宽度
varcloneLiWidth=0;//包含克隆li列表宽度
varLis=boxUl.children();
varbtnPrev=box.find('.btnPrev');
varbtnNext=box.find('.btnNext');
//默认参数
vardefult={
vis:2,//显示个数
autoPlay:true,//自动播放
speed:50,//滚动速度
dir:'prev',//滚动方向
btnHidden:false,//按钮是否隐藏
type:'v'//水平或者垂直方向
};
varopt=$.extend({},defult,options);
//构建DOM结构
varlastClone=0;//最后克隆元素
varlastCloneHeight=0;//最后克隆元素高度
varallCloneHeight=0;//全部克隆元素总高度
varlastCloneWidth=0;
varallCloneWidth=0;
varvisHeight=0;//可视高度
varvisWidth=0;
varboxUl_wrap;
if(opt.type==="v"){//垂直方向
Lis.each(function(){
$(this).height($(this).height());
LiHeight+=$(this).outerHeight(true);
});
lastClone=boxUl.children(':last').clone().addClass('clone').prependTo(boxUl);
lastCloneHeight=lastClone.outerHeight(true);
allCloneHeight=lastClone.outerHeight(true);
for(vari=0;i<opt.vis;i++){
Lis.eq(i).clone().addClass('clone').appendTo(boxUl);
allCloneHeight+=Lis.eq(i).outerHeight(true);
}
visHeight=allCloneHeight-lastCloneHeight;
cloneLiHeight=LiHeight+allCloneHeight;
boxUl_wrap=$('<div></div>').css({'width':'100%','height':visHeight,'overflow':'hidden','position':'relative'}).attr('id','ulWrap');
boxUl.css({'height':cloneLiHeight,'top':-lastCloneHeight}).wrap(boxUl_wrap);
}elseif(opt.type==="h"){//水平方向
Lis.css({'whiteSpace':'nowrap','float':'left','paddingRight':'10px'});
Lis.each(function(){
$(this).width($(this).width());
LiWidth+=$(this).outerWidth(true);
});
lastClone=boxUl.children(':last').clone().addClass('clone').prependTo(boxUl);
lastCloneWidth=lastClone.outerWidth(true);
allCloneWidth=lastClone.outerWidth(true);
for(varj=0;j<opt.vis;j++){
Lis.eq(j).clone().addClass('clone').appendTo(boxUl);
allCloneWidth+=Lis.eq(j).outerWidth(true);
}
visHeight=Lis.eq(0).outerHeight(true);
visWidth=allCloneWidth-lastCloneWidth;
cloneLiWidth=LiWidth+allCloneWidth;
boxUl_wrap=$('<div></div>').css({'width':visWidth,'height':visHeight,'overflow':'hidden','position':'relative'}).attr('id','ulWrap');
boxUl.css({'width':cloneLiWidth,'left':-lastCloneWidth}).wrap(boxUl_wrap);
box.css({'width':visWidth});
}
//添加事件处理
vartimer=null;
varscrollTop=function(){
clearInterval(timer);
timer=setInterval(function(){
vartmp=parseInt(boxUl.css('top').replace('px',""));
tmp--;
boxUl.animate({'top':tmp},0,function(){
if(tmp<=-(LiHeight+lastCloneHeight)){
boxUl.css('top',-lastCloneHeight);
}
});
},opt.speed);
};
varscrollDown=function(){
clearInterval(timer);
timer=setInterval(function(){
vartmp=parseInt(boxUl.css('top').replace('px',""));
tmp++;
boxUl.animate({'top':tmp},0,function(){
if(tmp>=0){
boxUl.css('top',-(LiHeight));
}
});
},opt.speed);
};
varscrollLeft=function(){
clearInterval(timer);
timer=setInterval(function(){
vartmp=parseInt(boxUl.css('left').replace('px',""));
tmp--;
boxUl.animate({'left':tmp},0,function(){
if(tmp<=-(LiWidth+lastCloneWidth)){
boxUl.css('left',-(lastCloneWidth));
}
});
},opt.speed);
};
varscrollRight=function(){
clearInterval(timer);
timer=setInterval(function(){
vartmp=parseInt(boxUl.css('left').replace('px',""));
tmp++;
boxUl.animate({'left':tmp},0,function(){
if(tmp>=0){
boxUl.css('left',-(LiWidth));
}
});
},opt.speed);
};
varscrollType=function(type,dir){
if(Lis.length>=opt.vis){//显示个数不能多于列表个数，否则不显示效果
varsdir=typeofdir!=="undefined"?dir:opt.dir;
switch(type){
case"v":
if(sdir=="prev"){scrollTop();}else{scrollDown();}
break;
case"h":
if(sdir=="prev"){scrollLeft();}else{scrollRight();}
}
}
};
if(opt.autoPlay){
scrollType(opt.type);
}
//添加事件处理
box.find('#ulWrap').hover(function(){
clearInterval(timer);
},function(){
scrollType(opt.type);
});
//按钮是否隐藏
if(!opt.btnHidden){
btnPrev.unbind('mouseover');
btnNext.unbind('mouseover');
btnPrev.mouseover(function(){
scrollType(opt.type,"prev");
});
btnNext.mouseover(function(){
scrollType(opt.type,"next");
});
}else{
btnPrev.hide();
btnNext.hide();
}
}
</script>
</body>
</html>
一些問題：
本地測試沒問題，但是通過document.write()把代碼輸入執行后，垂直模式下的li的高度height()獲取會有問題。原因不明,非常不解..
以上所述就是本文的全部内容了，希望大家能够喜欢。