<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
* { margin: 0;padding: 0;}
#div1 {
top:100px;
position: relative;
border: 1px solid black;
300px;
height: 300px;
margin: 10px auto;
overflow: hidden;
background-color:lightblue;
}
#div1 ul {
position: absolute;left: 0;
}
#div1 ul li {
list-style: none;
float: left;
200px;
height: 30px;
padding: 10px;
}
</style>
<script>
window.onload = function () {
var oDiv = document.getElementById('div1');
var oUl = oDiv.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
var timer = null;
var iSpeed = -5;
oUl.innerHTML += oUl.innerHTML;
oUl.style.height = aLi.length * aLi[0].offsetHeight + 'px';
timer =setTimeout(fnMove, 100);
oDiv.onmouseover = function () {
clearInterval(timer);
}
oDiv.onmouseout = function () {
clearInterval(timer);
timer = setInterval(fnMove, 100);
}
function fnMove() {
if (oUl.offsetTop < -oUl.offsetHeight / 2) {
oUl.style.top = 0;
}
oUl.style.top = oUl.offsetTop + iSpeed + 'px';
if ((oUl.offsetTop % 50) == 0) {
clearInterval(timer);
timer =setTimeout(fnMove, 2000);
} else {
clearInterval(timer);
timer = setTimeout(fnMove, 100);
}
}
}
</script>
</head>
<body>
<div id="div1">
<ul>
<li>明天你是否会想起曾经我写的日记</li>
<li>一个人的时候不是不像你</li>
<li>一个人的时候只是怕想你</li>
<li>一个人的时候如果下起了雨</li>
<li>我也会学你把伞丢到一边</li>
<li>七月份的尾巴你是狮子座</li>
</ul>
</div>
</body>
</html>