javascript實現(xiàn)文字無縫滾動效果
更新時間：2017年08月26日 08:52:31 投稿：lijiao
這篇文章主要為大家詳細介紹了javascript實現(xiàn)文字無縫滾動效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了文字無縫滾動效果，供大家參考，具體內(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)//設置定時器
container.onmouseover = function(){
clearInterval(timer)
}//鼠標移到marquee上時，清除定時器，停止?jié)L動
container.onmouseout = function(){
timer = setInterval(rolling, speed)
}//鼠標移開時重設定時器
}
</script>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
layui 對table中的數(shù)據(jù)進行轉(zhuǎn)義的實例
今天小編就為大家分享一篇layui 對table中的數(shù)據(jù)進行轉(zhuǎn)義的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
總結(jié)兩個Javascript的哈稀對象的一些編程技巧
總結(jié)兩個Javascript的哈稀對象的一些編程技巧...2007-04-04
本文為大家分享的是一款效果非?？岬奈募蟼鞅韱斡蛎阑匦?。有7種不同的美化文件上傳域的效果，很時尚，感興趣的小伙伴們可以參考一下2015-11-11
在微前端領(lǐng)域當中，沙箱是很重要的一件事情。本文就淺談前端JS沙箱實現(xiàn)的幾種方式，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
這篇文章主要為大家介紹了JSONP解決同源策略限制引起跨域問題原理解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
這篇文章主要介紹了何時使用Map來代替普通的JS對象，對Map感興趣的同學，可以參考下2021-04-04
所謂偽數(shù)組,指的是具有類似數(shù)組結(jié)構(gòu)的對象,但并非真正的數(shù)組,在本文中,我們將詳細介紹偽數(shù)組的特點和特征,并提供一些JavaScript代碼示例,感興趣的小伙伴快跟隨小編一起學習起來吧2023-11-11
首屏加載時間是一個衡量網(wǎng)頁性能和用戶體驗的關(guān)鍵指標,這個問題無論是在面試中還是在項目開發(fā)中都占有極其高的權(quán)重,本文為大家整理了幾種JS中優(yōu)化首屏加載時間的方法,希望對大家有所幫助2024-02-02
這篇文章主要為大家詳細介紹了簡單的js表格操作,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要為大家詳細介紹了JS設計模式之惰性模式的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09