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

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注