文字数项无缝滚动
因项目需求要一个简单的中奖名单的循环播放,在网上找了好多,写的都过于繁琐。
首先项目是移动端项目,无需做鼠标划过暂停,因时间紧张,本次也不再添加,有空闲时间再来补充。
1、布局部分
<div id="demo" class="qimo8"> <div class="qimo"> <div id="demo1"> <ul> <li>某某某获得一等奖</li> <li>某某某获得四等奖</li> <li>某某某获得三等奖</li> <li>某某某获得二等奖</li> <li>某某某获得四等奖</li> <li>某某某获得三等奖</li> <li>某某某获得二等奖</li> <li>某某某获得三等奖</li> <li>某某某获得一等奖</li> <li>某某某获得四等奖</li> <li>某某某获得三等奖</li> <li>某某某获得二等奖</li> <li>某某某获得四等奖</li> <li>某某某获得三等奖</li> <li>某某某获得二等奖</li> <li>某某某获得三等奖</li> </ul> </div> <div id="demo2"></div> </div> </div>
2、样式代码
<style media="screen"> .qimo8{ overflow:hidden; height: 200px;} .qimo8 .qimo {/*width:99999999px;*/height:8000%;} .qimo8 .qimo ul{overflow:hidden; zoom:1; } .qimo8 .qimo ul li{list-style:none; font-size: 24px;margin: 0 1rem;} </style>
3、js部分
var demo = document.getElementById("demo"); var demo1 = document.getElementById("demo1"); var demo2 = document.getElementById("demo2"); demo2.innerHTML=document.getElementById("demo1").innerHTML; function Marquee(){ if(demo.scrollTop-demo2.offsetHeight>=0){ demo.scrollTop-=demo1.offsetHeight; } else{ demo.scrollTop++; } } setInterval(Marquee,40);
完成啦!
想改为横屏滚动的,看懂代码自己就能动手改啦,空闲时再来补充!