html内容向上滚动效果,js实现文字定时向上翻滚滚动的特效实例

脚本代码(For Alixixi.com)如下:

js文字定时向上滚动特效

.jsc{border:1px solid #eee;width:668px;font-size:12px;height:24px;overflow:hidden;}

.jsc ul{list-style-type:none;margin:0;padding:0;margin-left:32px;}

.jsc ul li{height:26px;line-height:26px;width:320px;float:left;display:inline;}

• 阿里西西特效网一号滚动新闻
• 阿里西西特效网二号滚动新闻
• 阿里西西特效网三号滚动新闻
• 阿里西西特效网四号滚动新闻
• 阿里西西特效网五号滚动新闻
• 阿里西西特效网六号滚动新闻
• 阿里西西特效网七号滚动新闻
• 阿里西西特效网八号滚动新闻/a>

function $(element){

if(arguments.length>1){

for(var i=0,length=arguments.length,elements=[];i

elements.push($(arguments[i]));

}

return elements;

}

if(typeof element=="string"){

return document.getElementById(element);

}else{

return element;

}

}

var Class={

create:function(){

return function(){

this.initialize.apply(this,arguments);

}

}

}

Function.prototype.bind=function(object){

var method=this;

return function(){

method.apply(object,arguments);

}

}

var Scroll=Class.create();

Scroll.prototype={

initialize:function(element,height){

this.element=$(element);

this.element.innerHTML+=this.element.innerHTML;

this.height=height;

this.maxHeight=this.element.scrollHeight/2;

this.counter=0;

this.scroll();

this.timer="";

this.element.οnmοuseοver=this.stop.bind(this);

this.element.οnmοuseοut=function(){this.timer=setTimeout(this.scroll.bind(this),1000);}.bind(this);

},

scroll:function(){

if(this.element.scrollTop

this.element.scrollTop++;

this.counter++;

}else{

this.element.scrollTop=0;

this.counter=0;

}

if(this.counter

this.timer=setTimeout(this.scroll.bind(this),22);

}else{

this.counter=0;

this.timer=setTimeout(this.scroll.bind(this),3126);

}

},

stop:function(){

clearTimeout(this.timer);

}

}

var myscroll=new Scroll("zzjs_1",26);