<!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> 中了一個手機(jī)<li>? ? ? ? ? ? <li> 中了一塊毛巾<li>? ? ? ? ? ? <li> 中了保溫杯<li>? ? ? ? ? ? <li> 中了100塊錢紅包<li>? ? ? ? ? ? <li> 中了20元優(yōu)惠券<li>? ? ? ? ? ? <li> 中了100塊錢<li>? ? ? ? ? ? <!--<li> 中了10塊錢</li>? ? ? ? ? ? <li> 中了一個手機(jī)</li>? ? ? ? ? ? <li> 中了塊毛巾</li>? ? ? ? ? ? <li> 中了個保溫杯</li>? ? ? ? ? ? <li> 中了100塊錢</li>? ? ? ? ? ? <li> 中了20元優(yōu)惠券</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>在上面代碼中如果所有l(wèi)i的內(nèi)容換成下面的就不能允許了,如果換成上面的就可以正常運(yùn)行,這是怎么回事,找不到原因。
學(xué)了點(diǎn)js寫了個效果,但是有點(diǎn)毛病幫忙看一下
成長前端初學(xué)者
2018-02-09 22:54:36