兼容IE和FireFox的JS间歇性滚动效果

DATE: 2016-11-10 / VIEWS: 600

"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>兼容IE和FireFox的JS间歇性滚动效果</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<style type="text/css"> 
<!-- 
body { padding: 30px; font-size: 12px;} 
a { color: #000; text-decoration: none; } 
a:hover { color: #F60; } 
#scrollWrap { 
 width:300px;
 height: 18px; 
 overflow: hidden; 
 background: #E6F6F6; 
} 
#scrollMsg { 
 float: left; 
 text-align: left;
  padding:0 10px;
}
#scrollMsg ul {
  margin:0;
  padding:0;
}
#scrollMsg li { 
 line-height: 18px; 
  list-style:none;
} 
--> 
</style> 
</head> 
<body> 
 
<div id="scrollWrap"> 
<div id="scrollMsg"> 
 <ul> 
 <li><a href="#">1111111111111</a></li> 
 <li><a href="#">22222222222</a></li> 
 <li><a href="#">333333333333333</a></li> 
 </ul> 
</div> 
</div> 
 
<script type="text/javascript"> 
<!-- 
try{ 
 var isStoped = false; 
 var oScroll = document.getElementById("scrollWrap"); 
 with(oScroll){ 
 noWrap = true; 
 } 
 
 oScroll.onmouseover = new Function('isStoped = true'); 
 oScroll.onmouseout = new Function('isStoped = false'); 
 
 var preTop = 0; 
 var curTop = 0; 
 var stopTime = 0; 
 var oScrollMsg = document.getElementById("scrollMsg");
 
 oScroll.appendChild(oScrollMsg.cloneNode(true)); 
 init_srolltext(); 
}catch(e) {} 
 
function init_srolltext(){ 
 oScroll.scrollTop = 0; 
 setInterval('scrollUp()', 15); 
} 
 
function scrollUp(){ 
 if(isStoped) return; 
 curTop += 1; 
 if(curTop == 19) { 
 stopTime += 1; 
 curTop -= 1; 
 if(stopTime == 180) { 
 curTop = 0; 
 stopTime = 0; 
 } 
 }else{ 
 preTop = oScroll.scrollTop; 
 oScroll.scrollTop += 1; 
 if(preTop == oScroll.scrollTop){ 
 oScroll.scrollTop = 0; 
 oScroll.scrollTop += 1; 
 } 
 } 
} 
//--> 
</script> 
</body> 
</html>