Discuz論壇的JavaScript走馬燈公告效果

2024-09-05 12:21:17

字體：大中小

來源：轉載

供稿：網友

從Discuz論壇里挖出來的JavaScript走馬燈特效，中間會停頓，代碼兼容IE,FF,Opera,Safari,Chrome等多瀏覽器，點擊“運行”查看效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>有停頓的走馬燈效果</title><style type="text/css">.cls_container{border:1px solid #eee;width:668px;font-size:12px;height:24px;overflow:hidden;}.cls_container ul{list-style-type:none;margin:0;padding:0;margin-left:32px;}.cls_container ul li{height:26px;line-height:26px;width:320px;float:left;display:inline;}</style></head><body><div   class="70qarhlowxag"   id="myscroll" class="cls_container"> <ul><li>MSMAX 個人博客 v4.0最新版</li><li>高亮顯示代碼的在線編輯器ASP.NET版</li><li>SKYUC 天空網絡電影系統 v2.6.3 PHP版</li><li>基于AJAX的WEB流程圖制作工具</li><li>《Eclipse從入門到精通》陳剛教程巨著 (PDF)</li><li>ASP公文簽收系統 V2.0</li><li>JAVA版旋轉俄羅斯方塊游戲</li><li>Java日程管理——萬年行事歷源代碼</li> </ul></div><div   class="70qarhlowxag"   id="showhint"></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); }}var myscroll=new Scroll("myscroll",26);</script></body></html>

上一篇：很牛的字幕滾動效果

下一篇：碰到邊框自動反彈的走馬燈文字(Marguee)