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)文章
JavaScript返回上一頁(yè)的三種方法及區(qū)別介紹
這篇文章主要介紹了JavaScript返回上一頁(yè)的三種方法及區(qū)別介紹,本文直接給出示例代碼,需要的朋友可以參考下2015-07-07
js使用對(duì)象直接量創(chuàng)建對(duì)象的代碼
js使用對(duì)象直接量創(chuàng)建對(duì)象的代碼...2007-09-09
微信小程序?qū)崿F(xiàn)左滑動(dòng)刪除效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)左滑動(dòng)刪除效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07
Js數(shù)組扁平化實(shí)現(xiàn)方法代碼總匯
這篇文章主要介紹了Js數(shù)組扁平化實(shí)現(xiàn)方法代碼總匯,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11
bootstrap里bootstrap動(dòng)態(tài)加載下拉框的實(shí)例講解
今天小編就為大家分享一篇bootstrap里bootstrap動(dòng)態(tài)加載下拉框的實(shí)例講解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
JavaScript進(jìn)制數(shù)之間的互相轉(zhuǎn)換
這篇文章主要介紹了JavaScript進(jìn)制數(shù)之間的互相轉(zhuǎn)換,進(jìn)制轉(zhuǎn)換是人們利用符號(hào)來(lái)計(jì)數(shù)的方法,下文基于JavaScript實(shí)現(xiàn)進(jìn)制數(shù)之間的轉(zhuǎn)換,有一定的知識(shí)性參考價(jià)值,需要的小伙伴可以參考一下2022-05-05

