javascript實(shí)現(xiàn)文字無(wú)縫滾動(dòng)效果
更新時(shí)間:2017年08月26日 08:52:31 投稿:lijiao
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)文字無(wú)縫滾動(dòng)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了文字無(wú)縫滾動(dòng)效果,供大家參考,具體內(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"); }) //訂單滾動(dòng) 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è)置定時(shí)器 container.onmouseover = function(){ clearInterval(timer) }//鼠標(biāo)移到marquee上時(shí),清除定時(shí)器,停止?jié)L動(dòng) container.onmouseout = function(){ timer = setInterval(rolling, speed) }//鼠標(biāo)移開(kāi)時(shí)重設(shè)定時(shí)器 } </script>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- javascript單張多張圖無(wú)縫滾動(dòng)實(shí)例代碼
- JS實(shí)現(xiàn)單張或多張圖片持續(xù)無(wú)縫滾動(dòng)的示例代碼
- 純js實(shí)現(xiàn)無(wú)縫滾動(dòng)功能代碼實(shí)例
- JavaScript基于面向?qū)ο髮?shí)現(xiàn)的無(wú)縫滾動(dòng)輪播示例
- 原生JavaScript實(shí)現(xiàn)的無(wú)縫滾動(dòng)功能詳解
- js實(shí)現(xiàn)無(wú)縫滾動(dòng)雙圖切換效果
- js圖片無(wú)縫滾動(dòng)插件使用詳解
- JS實(shí)現(xiàn)簡(jiǎn)單的文字無(wú)縫上下滾動(dòng)功能示例
- 基于JavaScript實(shí)現(xiàn)無(wú)縫滾動(dòng)效果
- 基于javascript的無(wú)縫滾動(dòng)動(dòng)畫(huà)1
相關(guān)文章
layui 對(duì)table中的數(shù)據(jù)進(jìn)行轉(zhuǎn)義的實(shí)例
今天小編就為大家分享一篇layui 對(duì)table中的數(shù)據(jù)進(jìn)行轉(zhuǎn)義的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09總結(jié)兩個(gè)Javascript的哈稀對(duì)象的一些編程技巧
總結(jié)兩個(gè)Javascript的哈稀對(duì)象的一些編程技巧...2007-04-04何時(shí)使用Map來(lái)代替普通的JS對(duì)象
這篇文章主要介紹了何時(shí)使用Map來(lái)代替普通的JS對(duì)象,對(duì)Map感興趣的同學(xué),可以參考下2021-04-04JS首屏加載時(shí)間優(yōu)化的解決方法總結(jié)
首屏加載時(shí)間是一個(gè)衡量網(wǎng)頁(yè)性能和用戶體驗(yàn)的關(guān)鍵指標(biāo),這個(gè)問(wèn)題無(wú)論是在面試中還是在項(xiàng)目開(kāi)發(fā)中都占有極其高的權(quán)重,本文為大家整理了幾種JS中優(yōu)化首屏加載時(shí)間的方法,希望對(duì)大家有所幫助2024-02-02