javascript實現(xiàn)無縫上下滾動特效
更新時間：2015年12月16日 16:13:04 投稿：lijiao
這篇文章主要介紹了javascript實現(xiàn)無縫上下滾動特效的相關(guān)資料,需要的朋友可以參考下
本文實例講解了javascript實現(xiàn)無縫上下滾動的代碼，分享給大家供大家參考，具體內(nèi)容如下
js實現(xiàn)上下無縫滾動的原理是這樣的：
1、首先給容器設(shè)定高度或?qū)挾?，然后overflow:hidden；
2、容器高度設(shè)定后，內(nèi)容超出則被隱藏。
3、改變?nèi)萜鞯膕crollTop（上下滾動）屬性的值，讓內(nèi)容上下移動一個節(jié)點的位置（滾動的原理）；
4、到滾動的高度scrollTop大于或等于要滾動節(jié)點的高度時，設(shè)置scrollTop=0，并把把子節(jié)點樹中的第一個移動到最后，重新開始滾動，無間斷循環(huán)滾動效果就出現(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)滾動至colee1與colee2交界時
if(colee2.offsetTop-colee.scrollTop<=0){
colee.scrollTop-=colee1.offsetHeight; //colee跳到最頂端
}else{
colee.scrollTop++
}
}
var MyMar1=setInterval(Marquee1,speed)//設(shè)置定時器
//鼠標(biāo)移上時清除定時器達到滾動停止的目的
colee.onmouseover=function() {clearInterval(MyMar1)}
//鼠標(biāo)移開時重設(shè)定時器
colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}
</script>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。
相關(guān)文章
JavaScript實現(xiàn)動態(tài)生成表格案例詳解
本文主要介紹了通過JavaScript實現(xiàn)一個動態(tài)添加表格的案例，當(dāng)點擊添加按鈕時，可以彈出一個表單，然后將輸入的內(nèi)容添加到表格中，也可以將表格中的整行內(nèi)容清除。感興趣的可以學(xué)習(xí)一下2021-12-12
這篇文章主要介紹了js實現(xiàn)可拖動DIV的方法，有需要的朋友可以參考一下2013-12-12
這篇文章主要介紹了如何使用JS實現(xiàn)一個這樣的拖拽縮放效果,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-05-05
判斷數(shù)組是否包含某個元素的js函數(shù)實現(xiàn)方法
下面小編就為大家?guī)硪黄袛鄶?shù)組是否包含某個元素的js函數(shù)實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
這篇文章主要給大家總結(jié)介紹了關(guān)于在JS中如何輕松遍歷對象屬性的方式，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用JS具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要為大家詳細介紹了全屏js頭像上傳插件源碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-03-03
本文介紹利用js取到下拉框中選擇的值。并附上實例代碼，需要的朋友可以參考下2016-12-12
有人認(rèn)為Javascript缺乏隱藏對象細節(jié)信息的特性，因為Javascript的對象沒有私有變量和私有方法。這其實是個誤解，Javascript對象是可以有這些私有成員的。下面我們來詳細了解一下吧2019-05-05
類型守衛(wèi)是TypeScript中特有的用于在運行時檢查類型的方式,它顯式的將javascript代碼按類型劃分,從而確保了運行安全,下面我們就來簡單聊聊TypeScript中的4種類型守衛(wèi)吧2023-08-08
給大家圖文詳細分析一下jsonp的原理以及跨域問題的匯總。2017-11-11