javascript實(shí)現(xiàn)無縫上下滾動特效
本文實(shí)例講解了javascript實(shí)現(xiàn)無縫上下滾動的代碼,分享給大家供大家參考,具體內(nèi)容如下
js實(shí)現(xiàn)上下無縫滾動的原理是這樣的:
1、首先給容器設(shè)定高度或?qū)挾龋缓髈verflow:hidden;
2、容器高度設(shè)定后,內(nèi)容超出則被隱藏。
3、改變?nèi)萜鞯膕crollTop(上下滾動)屬性的值,讓內(nèi)容上下移動一個節(jié)點(diǎn)的位置(滾動的原理);
4、到滾動的高度scrollTop大于或等于要滾動節(jié)點(diǎn)的高度時,設(shè)置scrollTop=0,并把把子節(jié)點(diǎn)樹中的第一個移動到最后,重新開始滾動,無間斷循環(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)移上時清除定時器達(dá)到滾動停止的目的 colee.onmouseover=function() {clearInterval(MyMar1)} //鼠標(biāo)移開時重設(shè)定時器 colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)} </script>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助。
相關(guān)文章
JavaScript實(shí)現(xiàn)動態(tài)生成表格案例詳解
本文主要介紹了通過JavaScript實(shí)現(xiàn)一個動態(tài)添加表格的案例,當(dāng)點(diǎn)擊添加按鈕時,可以彈出一個表單,然后將輸入的內(nèi)容添加到表格中,也可以將表格中的整行內(nèi)容清除。感興趣的可以學(xué)習(xí)一下2021-12-12使用JavaScript實(shí)現(xiàn)一個拖拽縮放效果
這篇文章主要介紹了如何使用JS實(shí)現(xiàn)一個這樣的拖拽縮放效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-05-05判斷數(shù)組是否包含某個元素的js函數(shù)實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄袛鄶?shù)組是否包含某個元素的js函數(shù)實(shí)現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-05詳細(xì)分析jsonp的原理和實(shí)現(xiàn)方式
給大家圖文詳細(xì)分析一下jsonp的原理以及跨域問題的匯總。2017-11-11