文字滚动特效（兼容多浏览器）_电脑软硬件应用网_国内最受关注的计算机应用解决中心

首页·电脑学院·电脑故障·操作系统·硬件教程·局域网技术·QQ技巧·网络安全·办公软件· 数据库

导航·设计学院·图像处理·网页设计·软件教程·服务器技术·笔记本·专家装机·网络编程·在线问答

当前位置：电脑软硬件应用网 > 设计学院 > 网页特效 > 正文

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

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

2009-9-19 11:37:38　　文/网页特效　　出处:电脑软硬件应用网　　

打造兼容(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>

上一篇文章：网页特效代码:JavaScript显示系统时间

下一篇文章： JS特效代码:实现间歇无缝文字滚动特效

最新热点		最新推荐		相关文章
				Photoshop制作一款可爱的奶牛文字 Photoshop制作漂亮的折纸文字网页特效代码:仿京东的商品分类导航… Photoshop制作不锈钢金属艺术字不能屏蔽的网页右下角窗口特效装载页面进度条代码 Photoshop制作紫色水晶文字特效 Photoshop制作WinXP系统文字特效链接特效之js做引用文章链接代码左右移动转换文字特效HTML代码解析