jquery 文字無縫滾動
阿新 • • 發佈:2018-12-06
這裡作為一個文字無縫滾動,簡單js寫法記錄
html:
<!-- box-move 滾動的盒子 ul1 滾動列表 ul2 銜接列表 --> <div id="box-move" style="height: 78px; overflow: hidden;"> <ul id="ul1"> <li class="ellipsis"><a href="{$vo.href}" target="_blank" class="ellipsis" style="display: inline-block;">{$vo.title}</a></li> <li class="ellipsis"><a href="{$vo.href}" target="_blank" class="ellipsis" style="display: inline-block;">{$vo.title}</a></li> <li class="ellipsis"><a href="{$vo.href}" target="_blank" class="ellipsis" style="display: inline-block;">{$vo.title}</a></li> <li class="ellipsis"><a href="{$vo.href}" target="_blank" class="ellipsis" style="display: inline-block;">{$vo.title}</a></li> </ul> <ul id="ul2"> </ul> </div>
js:
//熱點新聞無縫滾動 window.onload=function(){ //先獲取三個元素 var area = $("#box-move"), ul1 = $("#ul1"), ul2 = $("#ul2"); area.scrollTop(0); //克隆一個列表ul2,作為銜接滾動; ul2.html(ul1.html()); //按照指定的週期(以毫秒計)來呼叫函式。 var myscroll = setInterval(function(){scroll()}, 50) var top = area.scrollTop(); function scroll(){ if (area.scrollTop() >= ul1.height()) { top = 0;area.scrollTop(0) }else{ area.scrollTop(top++); } } //滑鼠移入清除滾動 area.mouseover(function(){ clearInterval(myscroll) }) //滑鼠移出滾動繼續 area.mouseout(function(){ myscroll = setInterval(function(){scroll()}, 50) }) }