javascript實(shí)現(xiàn)無縫上下滾動(dòng)特效

更新時(shí)間：2015年12月16日 16:13:04 投稿：lijiao

這篇文章主要介紹了javascript實(shí)現(xiàn)無縫上下滾動(dòng)特效的相關(guān)資料,需要的朋友可以參考下

本文實(shí)例講解了javascript實(shí)現(xiàn)無縫上下滾動(dòng)的代碼，分享給大家供大家參考，具體內(nèi)容如下

js實(shí)現(xiàn)上下無縫滾動(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)樹中的第一個(gè)移動(dòng)到最后，重新開始滾動(dòng)，無間斷循環(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)移開時(shí)重設(shè)定時(shí)器
colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}
</script>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章:

相關(guān)文章

Javascript的并行運(yùn)算實(shí)現(xiàn)代碼
隨著多核cpu的普級,并發(fā)/并行多線程運(yùn)算在主流的編程語言越來越流行,而在目前Javascript實(shí)現(xiàn)中還看不到在語言方面支持多線程,現(xiàn)在Javascript如此流行,真希望今后會(huì)在語言的層面有很大的變化.
2010-11-11
Javascript實(shí)現(xiàn)蘋果懸浮虛擬按鈕
本文給大家分享的是使用javascript實(shí)現(xiàn)仿制蘋果的懸浮虛擬按鈕的代碼，非常的簡單，給大家一個(gè)思路，大家可以根據(jù)自己的情況自由擴(kuò)展。
2016-04-04
使用TypeScript接口優(yōu)化數(shù)據(jù)結(jié)構(gòu)的示例詳解
在現(xiàn)代軟件開發(fā)中,數(shù)據(jù)結(jié)構(gòu)的設(shè)計(jì)至關(guān)重要,它直接影響到程序的性能和可維護(hù)性,TypeScript 作為一種靜態(tài)類型的超集,為 JavaScript 帶來了類型系統(tǒng),本文將探討如何利用 TypeScript 的接口（Interfaces）來優(yōu)化數(shù)據(jù)結(jié)構(gòu),需要的朋友可以參考下
2024-09-09
微信小程序自定義帶價(jià)格顯示日歷效果
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義帶價(jià)格顯示日歷效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-12-12
javascript中Date對象的使用總結(jié)
本文介紹了Date對象的使用方法，清晰明了，實(shí)現(xiàn)方法有多種，僅供大家參考，希望對大家有所幫助，下面就跟小編一起來看看吧
2016-11-11
IE6/7/8中Option元素未設(shè)value時(shí)Select將獲取空字符串
可以看到當(dāng)忘記寫option的value時(shí)這些現(xiàn)代瀏覽器都會(huì)盡量返回正確的（客戶端程序員想要的）結(jié)果value，其容錯(cuò)性比IE6/7/8做的更好。
2011-04-04
javascript實(shí)現(xiàn)獲取字符串hash值
Hash 可以看作是一個(gè) 關(guān)聯(lián)數(shù)組，它對每一個(gè)值都綁定了一個(gè)唯一的鍵（值并不必須是唯一的），然而，它不能保證迭代時(shí)元素的順序始終一致。因?yàn)?JavaScript 程序語言的特性，每個(gè)對象實(shí)際上都是一個(gè) hash,下面我們就來詳細(xì)探討下。
2015-05-05
nuxt中使用路由守衛(wèi)的方法步驟
這篇文章主要介紹了nuxt中使用路由守衛(wèi)的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(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