<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文字向上滚动</title>
<style type="text/css">
*{margin: 0px;padding: 0px;}
#scrollBox{width: 300px;height: 150px;margin: 100px auto;background: #f00;overflow: hidden;}
ul,li{list-style: none;display:block;}
#scrollBox #con1,#con2{width: 280px;float: left;}
#scrollBox li{height: 15px;line-height: 15px;text-align: center;}
</style>
</head>
<body>
<div id="scrollBox">
<ul id="con1">
<li>中了10块钱<li>
<li> 中了一个手机<li>
<li> 中了一块毛巾<li>
<li> 中了保温杯<li>
<li> 中了100块钱红包<li>
<li> 中了20元优惠券<li>
<li> 中了100块钱<li>
<!--<li> 中了10块钱</li>
<li> 中了一个手机</li>
<li> 中了块毛巾</li>
<li> 中了个保温杯</li>
<li> 中了100块钱</li>
<li> 中了20元优惠券</li>
<li> 中了100块钱</li>-->
</ul>
<ul id="con2"></ul>
</div>
<script type="text/javascript">
var area = document.getElementById('scrollBox');
var con1 = document.getElementById('con1');
var con2 = document.getElementById('con2');
con2.innerHTML = con1.innerHTML;
function scrollUp(){
if(area.scrollTop >= con1.offsetHeight){
area.scrollTop = 0;
}else{
area.scrollTop++
}
}
var time=50;
var mytimer=setInterval(scrollUp,time);
area.onmouseover=function(){
clearInterval(mytimer);
}
area.onmouseout=function(){
mytimer=setInterval(scrollUp,time);
}
</script>
</body>
</html>
在上面代码中如果所有li的内容换成下面的就不能允许了，如果换成上面的就可以正常运行，这是怎么回事，找不到原因。
QQ_随意
相关分类