文字滚动特效（兼容多浏览器）

打造兼容(IE,FF,Opera,Safari,Chrome)多浏览器的JavaScript特效，让文字滚动。

<!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 #ccc;width:680px;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:24px;line-height:24px;width:320px;float:left;display:inline;} </style> </head> <body> <div id="myscroll" class="cls_container"> <ul> <li><a href="#">微软和谷歌对浏览器的垄断会导致Web的私有化吗? </a></li> <li><a href="#">Subversion高级应用:SVN的多种认证方式</a></li> <li><a href="#">年度总结:2008年Java工具</a></li> <li><a href="#">要不要把IT主导权还给业务人员? </a></li> <li><a href="#">IT专家网08年回顾:开发语言与开发平台共舞 </a></li> <li><a href="#">下一代网络业务融合</a></li> <li><a href="#">方正科技七大优势打造全流程专业外包</a></li> <li><a href="#">08回顾:Oracle能否继续领跑者数据库市场? </a></li> <li><a href="#">Web安全性问题的层次关系分析</a></li> <li><a href="#">从融合至存储以太网成企业网络终极答案</a></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),20); }else{ this.counter=0; this.timer=setTimeout(this.scroll.bind(this),3000); } }, stop:function(){ clearTimeout(this.timer); } } var myscroll=new Scroll("myscroll",24); </script> </body> </html>

搜索

文字滚动特效（兼容多浏览器）