仿DZ论坛js文字定时向上滚动效果

发表于2014-02-28 16:50:09来源于创想网页设计工作室

次点击[大] [中] [小] [打印] [关闭窗口] [评论]

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

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

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

<div id="22ba_com" class="22ba">

  <ul>

    <li><a href="https://www.22ba.com/" target="_blank">站长特效网一号滚动新闻</a></li><li><a href="https://www.22ba.com/" target="_blank">站长特效网二号滚动新闻</a></li><li><a href="https://www.22ba.com/" target="_blank">站长特效网三号滚动新闻</a></li><li><a href="https://www.22ba.com/" target="_blank">站长特效网四号滚动新闻</a></li><li><a href="http://www.zzjs.net" target="_blank">站长特效网五号滚动新闻</a></li><li><a href="https://www.22ba.com/" target="_blank">站长特效网六号滚动新闻</a></li><li><a href="https://www.22ba.com/" target="_blank">站长特效网七号滚动新闻</a></li><li><a href="https://www.22ba.com/" target="_blank">站长特效网八号滚动新闻/a></li>

  </ul>

</div>

<script type="text/javascript">

function $(element){

 if(arguments.length>1){

  for(var i=0,length=arguments.length,elements=[];i<length;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.onmouseover=this.stop.bind(this);

  this.element.onmouseout=function(){this.timer=setTimeout(this.scroll.bind(this),1000);}.bind(this);

 },

 scroll:function(){

  if(this.element.scrollTop<this.maxHeight){

   this.element.scrollTop++;

   this.counter++;

  }else{

   this.element.scrollTop=0;

   this.counter=0;

  }

 

  if(this.counter<this.height){

   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);

 }

}//创想工作室www.22ba.com整理收集。

var myscroll=new Scroll("22ba_com",26);

</script>

相关热词搜索：文字特效代码js特效文字滚动特效滚动效果

上一篇：js实现文字定时滚动特效

下一篇：jQuery实现单行文字循环滚动