<!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的内容换成下面的就不能允许了,如果换成上面的就可以正常运行,这是怎么回事,找不到原因。
添加回答
举报
0/150
提交
取消