本文實(shí)例為大家分享了文字無縫滾動效果,供大家參考,具體內(nèi)容如下
html
<dl id="marquee" class="marquee"> <dt> <ul class="right-content"> <li> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="orderNum">BKCSHC161014002153</a> </li> <li> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="orderNum">BKCSHC161014002153</a> </li> <li> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="orderNum">BKCSHC161014002153</a> </li> ... </ul> </dt> <dd></dd></dl>
js
<script> $(function(){ Marquee("marquee"); }) //訂單滾動 var Marquee = function(id){ var container = document.getElementById(id), original = container.getElementsByTagName("dt")[0], clone = container.getElementsByTagName("dd")[0], liLength=original.getElementsByTagName("li").length, speed = 55; if(liLength<=8){ return } clone.innerHTML = original.innerHTML; var rolling = function(){ if (container.scrollTop === clone.offsetHeight) { container.scrollTop = 0; } else { container.scrollTop++; } } var timer = setInterval(rolling, speed)//設(shè)置定時器 container.onmouseover = function(){ clearInterval(timer) }//鼠標(biāo)移到marquee上時,清除定時器,停止?jié)L動 container.onmouseout = function(){ timer = setInterval(rolling, speed) }//鼠標(biāo)移開時重設(shè)定時器 } </script>以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持VeVb武林網(wǎng)。
新聞熱點(diǎn)
疑難解答