文字轮播,无缝滚动
<script type="text/javascript"> //文字轮播一 (function() { var l1 =document.getElementById("ccup_left"); var l2 = document.getElementById("ccup_left_copy"); var box = document.getElementById("demo-list_left"); autoScroll(); function autoScroll() { console.log(l1); if (l1.offsetHeight > box.offsetHeight) { l2.innerHTML = l1.innerHTML;//克隆list1的数据,使得list2和list1的数据一样 scrollMove = setInterval(scrollup, 30);//数值越大,滚动速度越慢 box.onmouseover = function () { clearInterval(scrollMove) } } } function scrollup() { //滚动条距离顶部的值恰好等于list1的高度时,达到滚动临界点,此时将让scrollTop=0,让list1回到初始位置,实现无缝滚动 if (box.scrollTop >= l1.offsetHeight) { box.scrollTop = 0; } else { box.scrollTop++; } } //鼠标离开时,滚动继续 box.onmouseout = function () { scrollMove = setInterval(scrollup, 30); } })(); </script>
<div id="demo-list_left" class="demo-list "> <div id="ccup_left" class="ccup_left"> <div class="item_txt">16号楼首层**装验收记录</div> <div class="item_txt">18号楼28*收记录<*/div> <div class="item_txt">19号楼15**记录</div> <div class="item_txt">20号楼20层**录</div> <div class="item_txt">21号楼11层**录</div> <div class="item_txt">22号楼02层**记录</div> <div class="item_txt">23号楼202层**收记录</div> <div class="item_txt">24号楼14层*记录</div> <div class="item_txt">25号楼13层*记录</div> <div class="item_txt">26号楼17层*</div> <div class="item_txt">27号楼03层*录</div> <div class="item_txt">28号楼05层*收记录</div> <div class="item_txt">29楼06层*记录</div> <div class="item_txt">30号楼78层*记录</div> <div class="item_txt">31号楼58层*记录</div> <div class="item_txt">32号楼46层*记录</div> <div class="item_txt">33号楼12层*记录</div> <div class="item_txt">34号楼11层*记录</div> </div> <div id="ccup_left_copy" class="ccup_left_copy"> </div> </div>
.demo-list { width: 100%; position: relative; height: 160px; overflow: hidden; }