<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
border-bottom: 1px dashed #000000;
height: 30px;
line-height: 30px;
overflow: hidden;
position: relative;
}
li div{
position: absolute;
top: -30px;
}
li p{
height: 30px;
}
#list1,#list2{
width: 300px;
float: left;
border-top:1px solid #000000 ;
margin: 20px;
}
</style>
</head>
<body>
<ul id="list1">
<li>
<div>
<p>1111111111</p>
<p>2222222222</p>
</div>
</li>
<li>
<div>
<p>3333333333</p>
<p>4444444444</p>
</div>
</li>
<li>
<div>
<p>5555555555</p>
<p>6666666666</p>
</div>
</li>
<li>
<div>
<p>7777777777</p>
<p>8888888888</p>
</div>
</li>
<li>
<div>
<p>9999999999</p>
<p>aaaaaaaaaa</p>
</div>
</li>
<li>
<div>
<p>bbbbbbbbbb</p>
<p>cccccccccc</p>
</div>
</li>
</ul>
<ul id="list2">
<li>
<div>
<p>1111111111</p>
<p>2222222222</p>
</div>
</li>
<li>
<div>
<p>3333333333</p>
<p>4444444444</p>
</div>
</li>
<li>
<div>
<p>5555555555</p>
<p>6666666666</p>
</div>
</li>
<li>
<div>
<p>7777777777</p>
<p>8888888888</p>
</div>
</li>
<li>
<div>
<p>9999999999</p>
<p>aaaaaaaaaa</p>
</div>
</li>
<li>
<div>
<p>bbbbbbbbbb</p>
<p>cccccccccc</p>
</div>
</li>
</ul>
<script src="../运动框架/moves.js"></script>
<script>
window.onload = function(){
var oList1 = document.getElementById("list1");
var oList2 =document.getElementById("list2");
toShow(oList1);
setTimeout(function(){
toShow(oList2);
},2000)
function toShow(obj){
var aDiv = obj.getElementsByTagName("div");
var iNow = 0;
var timer = null;
var onOff = true;
setInterval(function(){
changeTop();
},4000);
function changeTop(){
timer = setInterval(function(){
if (iNow == aDiv.length) {
clearInterval(timer);
iNow = 0;
onOff = !onOff;
}else{
if (onOff) {
startMove(aDiv[iNow],{top:0});
iNow++;
}else{
startMove(aDiv[iNow],{top:-30});
iNow++;
}
}
},100)
}
}
}
</script>
</body>
</html>
posted on
