<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>h5音乐播放器</title>
<style>
*{ margin: 0; padding: 0; list-style: none; }
#box{ height: 80px; overflow: hidden; padding:10px; background: #333}
ul{ font-size: 14px; border-bottom: 1px solid #eee; color: #fff}
ul li{ line-height: 24px;}
</style>
</head>
<body>
<div id="box">
<ul id="demo1">
<li>1.那你呢那你呢</li>
<li>2.那你呢那你呢</li>
<li>3.那你呢那你呢</li>
<li>4.那你呢那你呢</li>
<li>5.那你呢那你呢</li>
</ul>
<ul id="demo2"></ul>
</div>
<script>
var box=document.getElementById("box");//box是包裹滚动内容的盒子
box.scrollTop=0; //scrollTop为盒子向上平移的距离
var cont1=document.getElementById("demo1");
var cont2=document.getElementById("demo2");
function marquee() {
if(box.scrollTop > cont1.offsetHeight){ //盒子向上平移的距离大于内容的宽度时（此时复制的内容到达顶端），将盒子便宜高度设零，原始内容可见
box.scrollTop=0;
}else {
box.scrollTop++;
}
}
cont2.innerHTML=cont1.innerHTML; //拷贝内容，盒子平移时保证无缝连接
var flag=setInterval('marquee()',50);
box.onmouseover=function () {
clearInterval(flag)
}
box.onmouseout=function () {
flag=setInterval('marquee()',50);
}
</script>
</body>
</html>