快捷導(dǎo)航

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實(shí)現(xiàn)動(dòng)態(tài)生成表格案例詳解
本文主要介紹了通過JavaScript實(shí)現(xiàn)一個(gè)動(dòng)態(tài)添加表格的案例，當(dāng)點(diǎn)擊添加按鈕時(shí)，可以彈出一個(gè)表單，然后將輸入的內(nèi)容添加到表格中，也可以將表格中的整行內(nèi)容清除。感興趣的可以學(xué)習(xí)一下
2021-12-12
js實(shí)現(xiàn)可拖動(dòng)DIV的方法
這篇文章主要介紹了js實(shí)現(xiàn)可拖動(dòng)DIV的方法，有需要的朋友可以參考一下
2013-12-12
使用JavaScript實(shí)現(xiàn)一個(gè)拖拽縮放效果
這篇文章主要介紹了如何使用JS實(shí)現(xiàn)一個(gè)這樣的拖拽縮放效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-05-05
判斷數(shù)組是否包含某個(gè)元素的js函數(shù)實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄袛鄶?shù)組是否包含某個(gè)元素的js函數(shù)實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-05-05
JS中如何輕松遍歷對象屬性的方式總結(jié)
這篇文章主要給大家總結(jié)介紹了關(guān)于在JS中如何輕松遍歷對象屬性的方式，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用JS具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-08-08
全屏js頭像上傳插件源碼高清版
這篇文章主要為大家詳細(xì)介紹了全屏js頭像上傳插件源碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-03-03
利用js獲取下拉框中所選的值
本文介紹利用js取到下拉框中選擇的值。并附上實(shí)例代碼，需要的朋友可以參考下
2016-12-12
深入了解JavaScript 私有化
有人認(rèn)為Javascript缺乏隱藏對象細(xì)節(jié)信息的特性，因?yàn)镴avascript的對象沒有私有變量和私有方法。這其實(shí)是個(gè)誤解，Javascript對象是可以有這些私有成員的。下面我們來詳細(xì)了解一下吧
2019-05-05
淺聊一下TypeScript中的4種類型守衛(wèi)
類型守衛(wèi)是TypeScript中特有的用于在運(yùn)行時(shí)檢查類型的方式,它顯式的將javascript代碼按類型劃分,從而確保了運(yùn)行安全,下面我們就來簡單聊聊TypeScript中的4種類型守衛(wèi)吧
2023-08-08
詳細(xì)分析jsonp的原理和實(shí)現(xiàn)方式
給大家圖文詳細(xì)分析一下jsonp的原理以及跨域問題的匯總。
2017-11-11