网页特效

js实现单行文字有停顿连续向上滚动特效(兼容IE,火狐等浏览器)

位置:首页 > 网页特效 > 窗口特效,2013-05-14
js实现单行文字有停顿连续向上滚动特效(兼容IE,火狐等浏览器)代码如下<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http...

js实现单行文字有停顿连续向上滚动特效(兼容IE,火狐等浏览器)

js文字特效

代码如下

<!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="http://www.ablanxue.com">微软和谷歌对浏览器的垄断会导致Web的私有化吗? </a></li> 
<li><a href="http://www.ablanxue.com">Subversion高级应用:SVN的多种认证方式</a></li> 
<li><a href="http://www.ablanxue.com">年度总结:2008年Java工具</a></li> 
<li><a href="http://www.ablanxue.com#">要不要把IT主导权还给业务人员? </a></li> 
<li><a href="http://www.ablanxue.com">IT专家网08年回顾:开发语言与开发平台共舞 </a></li> 
<li><a href="http://www.ablanxue.com">下一代网络业务融合</a></li> 
<li><a href="http://www.ablanxue.com">方正科技七大优势 打造全流程专业外包</a></li> 
<li><a href="http://www.ablanxue.com">08回顾:Oracle能否继续领跑者数据库市场? </a></li> 
<li><a href="http://www.ablanxue.com">Web安全性问题的层次关系分析</a></li> 
<li><a href="http://www.ablanxue.com">从融合至存储 以太网成企业网络终极答案</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>

TAGS:js单行文字连续向上滚动js文字特效

猜你喜欢

NewHot