基于javascript的無(wú)縫滾動(dòng)動(dòng)畫實(shí)現(xiàn)2
以更少的代碼實(shí)現(xiàn)相同的效果應(yīng)該是我們寫程序的究極目標(biāo),當(dāng)然可讀性不能丟。在基于javascript的無(wú)縫滾動(dòng)動(dòng)畫實(shí)現(xiàn)1最后一個(gè)運(yùn)行框,我已經(jīng)做了這樣的探索。不過(guò)換湯不換藥,還是來(lái)來(lái)回回在scrollTop/scrollLeft與offsetTop/offsetLeft上做文章??偟乃悸坊臼沁@樣,讓某個(gè)元素整體向某個(gè)方向移動(dòng),這樣它里面的內(nèi)容(圖片或文字)就跟著移動(dòng),當(dāng)元素移動(dòng)到某一個(gè)距離后就回到原點(diǎn)。為了防止內(nèi)容移著移著就沒(méi)有了,我們需要兩套相同的內(nèi)容。在第一部分,第二套內(nèi)容是動(dòng)態(tài)生成的,并復(fù)制到另一個(gè)兄弟元素中,這在水平滾動(dòng)時(shí),我們需要花一些周折來(lái)讓所有內(nèi)容水平排列在一起。我就想,如果把第二套內(nèi)容直接加在相同的元素是否效果會(huì)更好呢?起碼CSS也少寫一點(diǎn)。用scrollTop/scrollLeft實(shí)現(xiàn)滾動(dòng),還有一個(gè)缺點(diǎn),它對(duì)父容器的寬度與高度有嚴(yán)格的規(guī)定的。比如我們想上下滾動(dòng)圖片,ul作為容器,li的圖片為滾動(dòng)內(nèi)容,那么ul的高至少為圖片的高的兩倍(我們假設(shè)每張圖片的尺寸都是相等的),否則就動(dòng)不了。鑒此,我開(kāi)發(fā)了新一代的無(wú)縫滾動(dòng)函數(shù)。
<ul id="marquee"> <li> <a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s017.jpg" alt="無(wú)縫滾動(dòng)"/></a> <a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s018.jpg" alt="無(wú)縫滾動(dòng)"/></a> <a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s019.jpg" alt="無(wú)縫滾動(dòng)"/></a> <a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s020.jpg" alt="無(wú)縫滾動(dòng)"/></a> <a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s021.jpg" alt="無(wú)縫滾動(dòng)"/></a> <a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s022.jpg" alt="無(wú)縫滾動(dòng)"/></a> <a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s023.jpg" alt="無(wú)縫滾動(dòng)"/></a> </li> </ul>
#marquee ,#marquee li { padding:0; margin:0; } #marquee { position:relative; list-style:none; height:150px; width:200px; overflow:hidden; border:10px solid #369; } #marquee li { position:absolute; } #marquee img { display:block; border:0; }
var Marquee = function(id){ try{document.execCommand("BackgroundImageCache", false, true);}catch(e){}; var container = document.getElementById(id), slide = container.getElementsByTagName("li")[0], speed = arguments[1] || 10, delta = 0,//當(dāng)前滾動(dòng)的位置 critical = slide.offsetHeight;//臨界值 slide.innerHTML += slide.innerHTML; var rolling = function(){ delta == -critical ? delta = 0 : delta--; slide.style.top = delta + "px"; } var timer = setInterval(rolling,speed)//設(shè)置定時(shí)器 container.onmouseover=function() {clearInterval(timer)}//鼠標(biāo)移到marquee上時(shí),清除定時(shí)器,停止?jié)L動(dòng) container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠標(biāo)移開(kāi)時(shí)重設(shè)定時(shí)器 } window.onload = function(){ Marquee("marquee"); }
<!doctype html> <title>javascript無(wú)縫滾動(dòng) by 司徒正美</title> <meta charset="utf-8"/> <meta name="keywords" content="javascript無(wú)縫滾動(dòng) by 司徒正美" /> <meta name="description" content="javascript無(wú)縫滾動(dòng) by 司徒正美" /> <base rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <style type="text/css"> h1 { font:400 16px/1 "Microsoft YaHei",KaiTi_GB2312,SimSun } #marquee ,#marquee li { padding:0; margin:0; } #marquee { position:relative; list-style:none; height:150px; width:200px; overflow:hidden; border:10px solid #369; } #marquee li { position:absolute; } #marquee img { display:block; border:0; } </style> <script type="text/javascript"> var Marquee = function(id){ try{document.execCommand("BackgroundImageCache", false, true);}catch(e){}; var container = document.getElementById(id), slide = container.getElementsByTagName("li")[0], speed = arguments[1] || 10, delta = 0,//當(dāng)前滾動(dòng)的位置 critical = slide.offsetHeight;//臨界點(diǎn) slide.innerHTML += slide.innerHTML; var rolling = function(){ delta == -critical ? delta = 0 : delta--; slide.style.top = delta + "px"; } var timer = setInterval(rolling,speed)//設(shè)置定時(shí)器 container.onmouseover=function() {clearInterval(timer)}//鼠標(biāo)移到marquee上時(shí),清除定時(shí)器,停止?jié)L動(dòng) container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠標(biāo)移開(kāi)時(shí)重設(shè)定時(shí)器 } window.onload = function(){ Marquee("marquee"); } </script> <h1>javascript無(wú)縫滾動(dòng)(向上滾動(dòng)) by 司徒正美</h1> <base rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <ul id="marquee"> <li> <a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s017.jpg" alt="無(wú)縫滾動(dòng) by 司徒正美"/></a> <a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s018.jpg" alt="無(wú)縫滾動(dòng) by 司徒正美"/></a> <a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s019.jpg" alt="無(wú)縫滾動(dòng) by 司徒正美"/></a> <a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s020.jpg" alt="無(wú)縫滾動(dòng) by 司徒正美"/></a> <a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s021.jpg" alt="無(wú)縫滾動(dòng) by 司徒正美"/></a> <a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s022.jpg" alt="無(wú)縫滾動(dòng) by 司徒正美"/></a> <a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s023.jpg" alt="無(wú)縫滾動(dòng) by 司徒正美"/></a> </li> </ul>
向下滾動(dòng)也很容易,只不過(guò)一開(kāi)始把它定位到第一套內(nèi)容與第二套內(nèi)容之間,也就是slide.offsetHeight,不過(guò)我們需要把它改成負(fù)數(shù)讓向整體向下移動(dòng),然后再慢慢向上移動(dòng)。
<!doctype html> <title>javascript無(wú)縫滾動(dòng) by 司徒正美</title> <meta charset="utf-8"/> <meta name="keywords" content="javascript無(wú)縫滾動(dòng) by 司徒正美" /> <meta name="description" content="javascript無(wú)縫滾動(dòng) by 司徒正美" /> <base rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <style type="text/css"> h1 { font:400 16px/1 "Microsoft YaHei",KaiTi_GB2312,SimSun } #marquee ,#marquee li { padding:0; margin:0; } #marquee { position:relative; list-style:none; height:150px; width:200px; overflow:hidden; border:10px solid #B45B3E; } #marquee li { position:absolute; } #marquee img { display:block; border:0; } </style> <script type="text/javascript"> var Marquee = function(id){ try{document.execCommand("BackgroundImageCache", false, true);}catch(e){}; var container = document.getElementById(id), slide = container.getElementsByTagName("li")[0], speed = arguments[1] || 10, critical = slide.offsetHeight,//臨界值 delta = -critical; slide.innerHTML += slide.innerHTML; var rolling = function(){ delta == 0 ? delta = -critical : delta++; slide.style.top = delta + "px"; } var timer = setInterval(rolling,speed)//設(shè)置定時(shí)器 container.onmouseover=function() {clearInterval(timer)}//鼠標(biāo)移到marquee上時(shí),清除定時(shí)器,停止?jié)L動(dòng) container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠標(biāo)移開(kāi)時(shí)重設(shè)定時(shí)器 } window.onload = function(){ Marquee("marquee"); } </script> <h1>javascript無(wú)縫滾動(dòng)(向下滾動(dòng)) by 司徒正美</h1> <base rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <ul id="marquee"> <li> <a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s017.jpg" alt="無(wú)縫滾動(dòng)"/></a> <a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s018.jpg" alt="無(wú)縫滾動(dòng)"/></a> <a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s019.jpg" alt="無(wú)縫滾動(dòng)"/></a> <a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s020.jpg" alt="無(wú)縫滾動(dòng)"/></a> <a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s021.jpg" alt="無(wú)縫滾動(dòng)"/></a> <a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s022.jpg" alt="無(wú)縫滾動(dòng)"/></a> <a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s023.jpg" alt="無(wú)縫滾動(dòng)"/></a> </li> </ul>
實(shí)現(xiàn)水平移動(dòng)也比第一部分容易,結(jié)構(gòu)層完全不用改動(dòng),表現(xiàn)層也改動(dòng)很少。
#marquee ,#marquee li { padding:0; margin:0; } #marquee { position:relative; list-style:none; height:150px; width:200px; overflow:hidden; border:10px solid #B45B3E; } #marquee li { position:absolute; width:1000%;/*★★新增加★★*/ } #marquee a { float:left;/*★★新增加★★*/ } #marquee img { display:block; border:0; }
難點(diǎn)是如何獲取那個(gè)臨界值,也就是夾在第一套內(nèi)容與第二個(gè)套內(nèi)容之間的那個(gè)位置。由于第二套內(nèi)容我們并沒(méi)有外套一個(gè)元素,因此我們需要從滾動(dòng)對(duì)象下手。滾動(dòng)對(duì)象都是a元素,我們需要計(jì)算出第二套內(nèi)容的第一個(gè)a元素到達(dá)父元素左邊的距離。這個(gè)值就是我們要求的臨界值。明白這點(diǎn),就輕松了。
//*************略********* slide.innerHTML += slide.innerHTML; var item = slide.getElementsByTagName("a"), critical = item[item.length/2].offsetLeft,//臨界值 //*************略*********
<!doctype html> <title>javascript無(wú)縫滾動(dòng) by 司徒正美</title> <meta charset="utf-8"/> <meta name="keywords" content="javascript無(wú)縫滾動(dòng) by 司徒正美" /> <meta name="description" content="javascript無(wú)縫滾動(dòng) by 司徒正美" /> <base rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <style type="text/css"> h1 { font:400 16px/1 "Microsoft YaHei",KaiTi_GB2312,SimSun } #marquee ,#marquee li { padding:0; margin:0; } #marquee { position:relative; list-style:none; height:150px; width:200px; overflow:hidden; border:10px solid #8080C0; } #marquee li { position:absolute; width:1000%;/*新增加*/ } #marquee a { float:left;/*新增加*/ } #marquee img { display:block; border:0; } </style> <script type="text/javascript"> var Marquee = function(id){ try{document.execCommand("BackgroundImageCache", false, true);}catch(e){}; var container = document.getElementById(id), slide = container.getElementsByTagName("li")[0], speed = arguments[1] || 10; slide.innerHTML += slide.innerHTML; var item = slide.getElementsByTagName("a"), critical = item[item.length/2].offsetLeft,//臨界值 delta = 0; var rolling = function(){ delta == -critical ? delta = 0 : delta--; slide.style.left = delta + "px"; } var timer = setInterval(rolling,speed)//設(shè)置定時(shí)器 container.onmouseover=function() {clearInterval(timer)}//鼠標(biāo)移到marquee上時(shí),清除定時(shí)器,停止?jié)L動(dòng) container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠標(biāo)移開(kāi)時(shí)重設(shè)定時(shí)器 } window.onload = function(){ Marquee("marquee"); } </script> <h1>javascript無(wú)縫滾動(dòng)(向左滾動(dòng)) by 司徒正美</h1> <base rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <ul id="marquee"> <li> <a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s017.jpg" alt="無(wú)縫滾動(dòng)"/></a> <a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s018.jpg" alt="無(wú)縫滾動(dòng)"/></a> <a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s019.jpg" alt="無(wú)縫滾動(dòng)"/></a> <a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s020.jpg" alt="無(wú)縫滾動(dòng)"/></a> <a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s021.jpg" alt="無(wú)縫滾動(dòng)"/></a> <a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s022.jpg" alt="無(wú)縫滾動(dòng)"/></a> <a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s023.jpg" alt="無(wú)縫滾動(dòng)"/></a> </li> </ul>
下面是向右滾動(dòng),由于都是不足20行的腳本,應(yīng)該一看源碼就明白,不詳述了。
<!doctype html> <title>javascript無(wú)縫滾動(dòng) by 司徒正美</title> <meta charset="utf-8"/> <meta name="keywords" content="javascript無(wú)縫滾動(dòng) by 司徒正美" /> <meta name="description" content="javascript無(wú)縫滾動(dòng) by 司徒正美" /> <base rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <style type="text/css"> h1 { font:400 16px/1 "Microsoft YaHei",KaiTi_GB2312,SimSun } #marquee ,#marquee li { padding:0; margin:0; } #marquee { position:relative; list-style:none; height:150px; width:200px; overflow:hidden; border:10px solid #6cc; } #marquee li { position:absolute; width:1000%; } #marquee a { float:left; } #marquee img { display:block; border:0; } </style> <script type="text/javascript"> var Marquee = function(id){ try{document.execCommand("BackgroundImageCache", false, true);}catch(e){}; var container = document.getElementById(id), slide = container.getElementsByTagName("li")[0], speed = arguments[1] || 10; slide.innerHTML += slide.innerHTML; var item = slide.getElementsByTagName("a"),//臨界點(diǎn) critical = item[item.length/2].offsetLeft, delta = -critical; var rolling = function(){ delta == 0 ? delta = -critical : delta++; slide.style.left = delta + "px"; } var timer = setInterval(rolling,speed)//設(shè)置定時(shí)器 container.onmouseover=function() {clearInterval(timer)}//鼠標(biāo)移到marquee上時(shí),清除定時(shí)器,停止?jié)L動(dòng) container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠標(biāo)移開(kāi)時(shí)重設(shè)定時(shí)器 } window.onload = function(){ Marquee("marquee"); } </script> <h1>javascript無(wú)縫滾動(dòng)(向右滾動(dòng)) by 司徒正美</h1> <base rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <ul id="marquee"> <li> <a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s017.jpg" alt="無(wú)縫滾動(dòng)"/></a> <a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s018.jpg" alt="無(wú)縫滾動(dòng)"/></a> <a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s019.jpg" alt="無(wú)縫滾動(dòng)"/></a> <a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s020.jpg" alt="無(wú)縫滾動(dòng)"/></a> <a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s021.jpg" alt="無(wú)縫滾動(dòng)"/></a> <a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s022.jpg" alt="無(wú)縫滾動(dòng)"/></a> <a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s023.jpg" alt="無(wú)縫滾動(dòng)"/></a> </li> </ul>
我們可以把上面四個(gè)函數(shù)合并成一個(gè)函數(shù),結(jié)構(gòu)層與表現(xiàn)層參照向上滾動(dòng)。
var Marquee = function(id){ try{document.execCommand("BackgroundImageCache", false, true);}catch(e){}; var container = document.getElementById(id), slide = container.getElementsByTagName("li")[0], options = arguments[1] || {}, speed = options.speed || 10, direction = options.direction || "left"; slide.innerHTML += slide.innerHTML; var item = slide.getElementsByTagName("a"), critical,delta,rolling,field; if(direction == "left" || direction == "right"){ slide.style.cssText = "width:1000%"; for(var i=0 ,l=item.length; i<l;i++){ item[i].style.cssText = "float:left"; } field = "left"; critical = item[item.length/2].offsetLeft; }else if(direction == "up" || direction == "down"){ field = "top"; critical = item[item.length/2].offsetTop; } if(direction == "up" || direction == "left"){ delta = 0; rolling = function(){ delta == -critical ? delta = 0 : delta--; slide.style[field] = delta + "px"; } }else if(direction == "down" || direction == "right"){ delta = -critical; rolling = function(){ delta == 0 ? delta = -critical : delta++; slide.style[field] = delta + "px"; } } var timer = setInterval(rolling,speed)//設(shè)置定時(shí)器 container.onmouseover=function() {clearInterval(timer)}//鼠標(biāo)移到marquee上時(shí),清除定時(shí)器,停止?jié)L動(dòng) container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠標(biāo)移開(kāi)時(shí)重設(shè)定時(shí)器 }
使用:
Marquee("marquee",{speed:35,direction:"up"});
有了這個(gè)我們實(shí)現(xiàn)另一種圖片輪換就容易了,這里先做個(gè)預(yù)告吧。本文到此為止。
到此這篇關(guān)于基于javascript的無(wú)縫滾動(dòng)動(dòng)畫實(shí)現(xiàn)2的文章就介紹到這了,更多相關(guān)javascript無(wú)縫滾動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- 基于javascript的無(wú)縫滾動(dòng)動(dòng)畫1
- javascript單張多張圖無(wú)縫滾動(dòng)實(shí)例代碼
- JS實(shí)現(xiàn)單張或多張圖片持續(xù)無(wú)縫滾動(dòng)的示例代碼
- 純js實(shí)現(xiàn)無(wú)縫滾動(dòng)功能代碼實(shí)例
- JavaScript基于面向?qū)ο髮?shí)現(xiàn)的無(wú)縫滾動(dòng)輪播示例
- 原生JavaScript實(shí)現(xiàn)的無(wú)縫滾動(dòng)功能詳解
- js實(shí)現(xiàn)無(wú)縫滾動(dòng)雙圖切換效果
- js圖片無(wú)縫滾動(dòng)插件使用詳解
- JS實(shí)現(xiàn)簡(jiǎn)單的文字無(wú)縫上下滾動(dòng)功能示例
- JavaScript實(shí)現(xiàn)圖片無(wú)縫滾動(dòng)效果
- js實(shí)現(xiàn)文字列表無(wú)縫滾動(dòng)效果
- js輪播圖無(wú)縫滾動(dòng)效果
相關(guān)文章
javascript查找字符串中出現(xiàn)最多的字符和次數(shù)的小例子
這篇文章介紹了javascript查找字符串中出現(xiàn)最多的字符和次數(shù)的小例子,有需要的朋友可以參考一下2013-10-10javascript實(shí)現(xiàn)日歷控件(年月日關(guān)閉按鈕)
經(jīng)常使用google的朋友一定對(duì)google絢麗的日歷控件記憶猶新吧,那我們也來(lái)實(shí)現(xiàn)一個(gè),雖然功能和效果比不上,但重要的是實(shí)現(xiàn)的過(guò)程2012-12-12JS實(shí)現(xiàn)選擇TextArea內(nèi)文本的方法
這篇文章主要介紹了JS實(shí)現(xiàn)選擇TextArea內(nèi)文本的方法,涉及javascript針對(duì)頁(yè)面TextArea元素焦點(diǎn)設(shè)置及文本獲取的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08微信小程序獲取地理位置及經(jīng)緯度授權(quán)代碼實(shí)例
這篇文章主要介紹了微信小程序獲取地理位置及經(jīng)緯度授權(quán)代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09微信小程序wx.getImageInfo()如何獲取圖片信息
這篇文章主要為大家詳細(xì)介紹了微信小程序wx.getImageInfo()如何獲取圖片信息,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-01-01ES6中的迭代器、Generator函數(shù)及Generator函數(shù)的異步操作方法
這篇文章主要介紹了ES6中的迭代器、Generator函數(shù)以及Generator函數(shù)的異步操作方法,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05JS實(shí)現(xiàn)瀏覽器點(diǎn)擊下載圖片功能案例分析【親測(cè)有效】
這篇文章主要介紹了JS實(shí)現(xiàn)瀏覽器點(diǎn)擊下載圖片功能,對(duì)比分析了同源與不同源兩種解決方案,并以實(shí)際案例形式分析了不同源情況下針對(duì)文件點(diǎn)擊下載的具體實(shí)現(xiàn)技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2023-04-04微信小程序?qū)崿F(xiàn)吸頂效果的方法實(shí)例
在微信小程序的開(kāi)發(fā)中,經(jīng)常會(huì)有列表分類標(biāo)簽隨著界面滾動(dòng)吸頂?shù)男Ч?下面這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)吸頂效果的相關(guān)資料,需要的朋友可以參考下2021-08-08JS監(jiān)聽(tīng)變量改變的實(shí)現(xiàn)
本文主要介紹了JS監(jiān)聽(tīng)變量改變的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04