<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文字定时向上滚动特效</title>
<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="#">一号滚动文字</a></li>
<li><a href="#">二号滚动文字</a></li>
<li><a href="#">三号滚动文字</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>
<p> </p>
<p> </p>
<p> </p>
</body>
</html>
