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