javascript實(shí)現(xiàn)無縫上下滾動(dòng)特效
本文實(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í)有所幫助。
- js向上無縫滾動(dòng),網(wǎng)站公告效果 具體代碼
- js 上下文字滾動(dòng)效果
- 滾動(dòng)條響應(yīng)鼠標(biāo)滑輪事件實(shí)現(xiàn)上下滾動(dòng)的js代碼
- javascript之循環(huán)停頓上下滾動(dòng)
- js實(shí)現(xiàn)帶按鈕的上下滾動(dòng)效果
- JavaScript 無縫上下左右滾動(dòng)加定高定寬停頓效果(兼容ie/ff)
- 友情鏈接橫向文字上下間隙循環(huán)滾動(dòng)JS效果
- 兼容IE和Firefox火狐的上下、左右循環(huán)無間斷滾動(dòng)JS代碼
- javascript上下左右定時(shí)滾動(dòng)插件
- 利用10行js代碼實(shí)現(xiàn)上下滾動(dòng)公告效果
相關(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-12js實(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詳細(xì)分析jsonp的原理和實(shí)現(xiàn)方式
給大家圖文詳細(xì)分析一下jsonp的原理以及跨域問題的匯總。2017-11-11