核心提示：文字无缝滚动。!DOCTYPE htmlhtmlheadmeta charset=utf-8title无缝滚动/titlestyle type=text/css*{padding: 0;margin:...
文字无缝滚动。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无缝滚动</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#box{
height:150px;
background: red;
margin: 0 auto;
overflow-y: hidden;
text-align: center;
}
#box li{
list-style: none;
height: 20px;
line-height: 20px;
}
</style>
</head>
<body>
<p id="box" onmouseover="end()" onmouseout="begin()">
<ul id="ul1">
<li>文字无缝滚动</li>
<li>文字无缝滚动</li>
<li>文字无缝滚动</li>
<li>文字无缝滚动</li>
<li>文字无缝滚动</li>
<li>文字无缝滚动</li>
<li>文字无缝滚动</li>
<li>文字无缝滚动</li>
<li>文字无缝滚动</li>
<li>文字无缝滚动</li>
</ul>
<ul id="ul2"></ul>
</p>
</body>
<script type="text/javascript">
var oDiv=document.getElementById("box");
var ul1=document.getElementById("ul1");
var ul2=document.getElementById("ul2");
var h=ul1.offsetHeight;
ul2.innerHTML=ul1.innerHTML;
var t=setInterval(f,10);
function f(){
if (oDiv.scrollTop>h) {
oDiv.scrollTop=0;
}
else{
oDiv.scrollTop++;
}
}
function end(){
clearInterval(t);
}
function begin(){
t=setInterval(f,10);
}
</script>
</html>
