<style type="text/css">
body,
ul,
li {
margin: 0px;
padding: 0px;
}
#center {
margin: 60px auto;
400px;
height: 100px;
background: #09c;
color:#fff;
overflow: auto;
}
#center ul li {
list-style-type: none;
line-height: 30px;
}
</style>
</head>
<body>
<div id="center">
<div id="center1">
<ul>
<li>11111111111111111</li>
<li>222222222222222222</li>
<li>3333333333333333333</li>
<li>4444444444444444</li>
<li>55555555555555555555</li>
<li>66666666666666</li>
<li>7777777777777</li>
</ul>
</div>
<div id="center2">
</div>
</div>
<script type="text/javascript">
var c = document.getElementById("center");
var c1 = document.getElementById("center1");
var c2 = document.getElementById("center2");
c2.innerHTML = c1.innerHTML;
function show() {
c.scrollTop++;
if (c.scrollTop == c2.offsetHeight) c.scrollTop = 0;
}
var stops = setInterval(show, 30);
c.onmousemove = function () { clearInterval(stops); }
c.onmouseout = function () { stops = setInterval(show, 30); }
</script>
</body>
</html>
