jQuery滚屏代码,还有一点地方封装不进去
//滚屏
Scroller=function(config,callback){
this.Obj=config.Obj;//滚屏对象
this.ul=this.Obj.eq(0).find("ul:first");
this.lineH=this.ul.find("li:first").height();
this.line=config.line?parseInt(config.line,10):parseInt(this.Obj.height()/this.lineH,10);//滚屏行数
this.speed=config.speed?parseInt(config.speed,10):500;//滚屏速度,越大越慢
this.timer=config.timer?parseInt(config.timer,10):3000;//滚屏间隔时间
this.timerID=null;
if(this.line==0) this.line=1;
this.upHeight=0-this.line*this.lineH;
this.scrollUp=function(){
this.ul.animate({
marginTop:this.upHeight
},this.speed,function(){
for(var j=1;j<=this.ScrollBox.line;j++){
$(this).find("li:first").appendTo($(this));
}
$(this).css({marginTop:0});
});
var SBox=this;
SBox.timerID=setTimeout(function(){
GobalScroll.apply(this,[SBox]);
},SBox.timer);
}
this.ul[0].ScrollBox=this;
this.stop=function(){
var ScrollBox=this.ScrollBox;
clearTimeout(ScrollBox.timerID);
}
this.scroll=function(){
var ScrollBox=this.ScrollBox;
ScrollBox.timerID=setTimeout(function(){
GobalScroll.apply(this,[ScrollBox]);
},ScrollBox.timer);
}
this.ul.hover(this.stop,this.scroll);
var ScrollBox1=this;
ScrollBox1.timerID=setTimeout(function(){
GobalScroll.apply(this,[ScrollBox1]);
},ScrollBox1.timer);
}
function GobalScroll(obj){
obj.scrollUp();
}
Scroller=function(config,callback){
this.Obj=config.Obj;//滚屏对象
this.ul=this.Obj.eq(0).find("ul:first");
this.lineH=this.ul.find("li:first").height();
this.line=config.line?parseInt(config.line,10):parseInt(this.Obj.height()/this.lineH,10);//滚屏行数
this.speed=config.speed?parseInt(config.speed,10):500;//滚屏速度,越大越慢
this.timer=config.timer?parseInt(config.timer,10):3000;//滚屏间隔时间
this.timerID=null;
if(this.line==0) this.line=1;
this.upHeight=0-this.line*this.lineH;
this.scrollUp=function(){
this.ul.animate({
marginTop:this.upHeight
},this.speed,function(){
for(var j=1;j<=this.ScrollBox.line;j++){
$(this).find("li:first").appendTo($(this));
}
$(this).css({marginTop:0});
});
var SBox=this;
SBox.timerID=setTimeout(function(){
GobalScroll.apply(this,[SBox]);
},SBox.timer);
}
this.ul[0].ScrollBox=this;
this.stop=function(){
var ScrollBox=this.ScrollBox;
clearTimeout(ScrollBox.timerID);
}
this.scroll=function(){
var ScrollBox=this.ScrollBox;
ScrollBox.timerID=setTimeout(function(){
GobalScroll.apply(this,[ScrollBox]);
},ScrollBox.timer);
}
this.ul.hover(this.stop,this.scroll);
var ScrollBox1=this;
ScrollBox1.timerID=setTimeout(function(){
GobalScroll.apply(this,[ScrollBox1]);
},ScrollBox1.timer);
}
function GobalScroll(obj){
obj.scrollUp();
}
Css:
ul,li{margin:0;padding:0}
#scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
#scrollDiv li{height:25px;padding-left:10px;}
HTML:
#scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
#scrollDiv li{height:25px;padding-left:10px;}
<p>多行滚动演示:</p>
<div id="scrollDiv">
<ul>
<li>这是公告标题的第一行</li>
<li>这是公告标题的第二行</li>
<li>这是公告标题的第三行</li>
<li>这是公告标题的第四行</li>
<li>这是公告标题的第五行</li>
<li>这是公告标题的第六行</li>
<li>这是公告标题的第七行</li>
<li>这是公告标题的第八行</li>
<li>这是公告标题的第9行</li>
<li>这是公告标题的第10行</li>
<li>这是公告标题的第9行</li>
<li>这是公告标题的第10行</li>
</ul>
</div>
调用:
<div id="scrollDiv">
<ul>
<li>这是公告标题的第一行</li>
<li>这是公告标题的第二行</li>
<li>这是公告标题的第三行</li>
<li>这是公告标题的第四行</li>
<li>这是公告标题的第五行</li>
<li>这是公告标题的第六行</li>
<li>这是公告标题的第七行</li>
<li>这是公告标题的第八行</li>
<li>这是公告标题的第9行</li>
<li>这是公告标题的第10行</li>
<li>这是公告标题的第9行</li>
<li>这是公告标题的第10行</li>
</ul>
</div>
var news=new Scroller({line:1,speed:1000,timer:4000,Obj:$("#scrollDiv")});