javascript實(shí)現(xiàn)無(wú)縫上下滾動(dòng)特效
本文實(shí)例講解了javascript實(shí)現(xiàn)無(wú)縫上下滾動(dòng)的代碼，分享給大家供大家參考，具體內(nèi)容如下
js實(shí)現(xiàn)上下無(wú)縫滾動(dòng)的原理是這樣的：
1、首先給容器設(shè)定高度或?qū)挾?，然后overflow:hidden；
2、容器高度設(shè)定后，內(nèi)容超出則被隱藏。
3、改變?nèi)萜鞯膕crollTop（上下滾動(dòng)）屬性的值，讓內(nèi)容上下移動(dòng)一個(gè)節(jié)點(diǎn)的位置（滾動(dòng)的原理）；
4、到滾動(dòng)的高度scrollTop大于或等于要滾動(dòng)節(jié)點(diǎn)的高度時(shí)，設(shè)置scrollTop=0，并把把子節(jié)點(diǎn)樹(shù)中的第一個(gè)移動(dòng)到最后，重新開(kāi)始滾動(dòng)，無(wú)間斷循環(huán)滾動(dòng)效果就出現(xiàn)了。
效果圖如下：
代碼如下：
<div id="colee" style="overflow:hidden;height:100px;width:410px;border:1px solid red;">
<div id="colee1">
<p>php</p>
<p>java</p>
<p>ruby</p>
<p>python</p>
<p>www.phpddt.com</p>
</div>
<div id="colee2"></div>
</div>
<script>
//速度設(shè)置
var speed=1;
var colee2=document.getElementById("colee2");
var colee1=document.getElementById("colee1");
var colee=document.getElementById("colee");
colee2.innerHTML=colee1.innerHTML; //克隆colee1為colee2
function Marquee1(){
//當(dāng)滾動(dòng)至colee1與colee2交界時(shí)
if(colee2.offsetTop-colee.scrollTop<=0){
colee.scrollTop-=colee1.offsetHeight; //colee跳到最頂端
}else{
colee.scrollTop++
}
}
var MyMar1=setInterval(Marquee1,speed)//設(shè)置定時(shí)器
//鼠標(biāo)移上時(shí)清除定時(shí)器達(dá)到滾動(dòng)停止的目的
colee.onmouseover=function() {clearInterval(MyMar1)}
//鼠標(biāo)移開(kāi)時(shí)重設(shè)定時(shí)器
colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}
</script>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。
- js向上無(wú)縫滾動(dòng),網(wǎng)站公告效果 具體代碼
- js 上下文字滾動(dòng)效果
- 滾動(dòng)條響應(yīng)鼠標(biāo)滑輪事件實(shí)現(xiàn)上下滾動(dòng)的js代碼
- javascript之循環(huán)停頓上下滾動(dòng)
- js實(shí)現(xiàn)帶按鈕的上下滾動(dòng)效果
- JavaScript 無(wú)縫上下左右滾動(dòng)加定高定寬停頓效果(兼容ie/ff)
- 友情鏈接橫向文字上下間隙循環(huán)滾動(dòng)JS效果
- 兼容IE和Firefox火狐的上下、左右循環(huán)無(wú)間斷滾動(dòng)JS代碼
- javascript上下左右定時(shí)滾動(dòng)插件
- 利用10行js代碼實(shí)現(xiàn)上下滾動(dòng)公告效果
相關(guān)文章
Javascript的并行運(yùn)算實(shí)現(xiàn)代碼
隨著多核cpu的普級(jí),并發(fā)/并行多線程運(yùn)算在主流的編程語(yǔ)言越來(lái)越流行,而在目前Javascript實(shí)現(xiàn)中還看不到在語(yǔ)言方面支持多線程,現(xiàn)在Javascript如此流行,真希望今后會(huì)在語(yǔ)言的層面有很大的變化.2010-11-11
Javascript實(shí)現(xiàn)蘋(píng)果懸浮虛擬按鈕
本文給大家分享的是使用javascript實(shí)現(xiàn)仿制蘋(píng)果的懸浮虛擬按鈕的代碼，非常的簡(jiǎn)單，給大家一個(gè)思路，大家可以根據(jù)自己的情況自由擴(kuò)展。2016-04-04
使用TypeScript接口優(yōu)化數(shù)據(jù)結(jié)構(gòu)的示例詳解
在現(xiàn)代軟件開(kāi)發(fā)中,數(shù)據(jù)結(jié)構(gòu)的設(shè)計(jì)至關(guān)重要,它直接影響到程序的性能和可維護(hù)性,TypeScript 作為一種靜態(tài)類(lèi)型的超集,為 JavaScript 帶來(lái)了類(lèi)型系統(tǒng),本文將探討如何利用 TypeScript 的接口（Interfaces）來(lái)優(yōu)化數(shù)據(jù)結(jié)構(gòu),需要的朋友可以參考下2024-09-09
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義帶價(jià)格顯示日歷效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
javascript中Date對(duì)象的使用總結(jié)
本文介紹了Date對(duì)象的使用方法，清晰明了，實(shí)現(xiàn)方法有多種，僅供大家參考，希望對(duì)大家有所幫助，下面就跟小編一起來(lái)看看吧2016-11-11
IE6/7/8中Option元素未設(shè)value時(shí)Select將獲取空字符串
可以看到當(dāng)忘記寫(xiě)option的value時(shí)這些現(xiàn)代瀏覽器都會(huì)盡量返回正確的（客戶(hù)端程序員想要的）結(jié)果value，其容錯(cuò)性比IE6/7/8做的更好。2011-04-04
javascript實(shí)現(xiàn)獲取字符串hash值
Hash 可以看作是一個(gè) 關(guān)聯(lián)數(shù)組，它對(duì)每一個(gè)值都綁定了一個(gè)唯一的鍵（值并不必須是唯一的）， 然而，它不能保證迭代時(shí)元素的順序始終一致。因?yàn)?JavaScript 程序語(yǔ)言的特性，每個(gè)對(duì)象實(shí)際上都是一個(gè) hash,下面我們就來(lái)詳細(xì)探討下。2015-05-05
這篇文章主要介紹了nuxt中使用路由守衛(wèi)的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
JS常用倒計(jì)時(shí)代碼實(shí)例總結(jié)
這篇文章主要介紹了JS常用倒計(jì)時(shí)代碼,結(jié)合實(shí)例形式總結(jié)分析了JS常用的倒計(jì)時(shí)功能實(shí)現(xiàn)方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2017-02-02
js倒計(jì)時(shí)小實(shí)例（多次定時(shí)）
這篇文章主要介紹了js實(shí)現(xiàn)可多次定時(shí)的倒計(jì)時(shí)小實(shí)例,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12