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

