基于javascript的無(wú)縫滾動(dòng)動(dòng)畫(huà)1
無(wú)縫滾動(dòng)好像是互聯(lián)網(wǎng)廣告最大的一個(gè)載體,可以用“無(wú)處不在”來(lái)形容它。不過(guò)它比起早期的閃光字體,浮動(dòng)廣告算進(jìn)步了。由于需求巨大,做前臺(tái)遲早會(huì)遇到它。我先給出結(jié)構(gòu)層部分,再慢慢講解其實(shí)現(xiàn)原理。
<dl id="marquee"> <dt> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s017.jpg" alt="無(wú)縫滾動(dòng)"/> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s018.jpg" alt="無(wú)縫滾動(dòng)"/> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s019.jpg" alt="無(wú)縫滾動(dòng)"/> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s020.jpg" alt="無(wú)縫滾動(dòng)"/> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s021.jpg" alt="無(wú)縫滾動(dòng)"/> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s022.jpg" alt="無(wú)縫滾動(dòng)"/> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s023.jpg" alt="無(wú)縫滾動(dòng)"/> </dt> <dd></dd> </dl>
我自認(rèn)為這個(gè)結(jié)構(gòu)比網(wǎng)上那些純DIV的結(jié)構(gòu)好許多,起碼可以節(jié)省許多id與class。都不知那個(gè)傻冒最先提出“DIV+CSS”這個(gè)說(shuō)法,正確的說(shuō)法應(yīng)該是"xhtml+CSS"。換言之,就是在宏觀的布局上,用塊狀元素代替table,由于DIV的默認(rèn)樣式較少,因此比較常用,table則回歸和專(zhuān)注于數(shù)據(jù)顯示。在微觀的格式化上,用CSS代替原來(lái)b、big、center、i 、s、small、 strike、tt這些單純用于樣式設(shè)置的標(biāo)簽,很明顯CSS的能力比它們更強(qiáng)大。
實(shí)現(xiàn)原理與純CSS相冊(cè)點(diǎn)擊錨點(diǎn)切換相應(yīng)的圖片差不多,都是利用scrollTop。過(guò)程如下,因?yàn)槲覀冊(cè)O(shè)置dl的overflow為hidden,所以其左邊的滾動(dòng)條就不可見(jiàn)了。當(dāng)我們不斷增加其scrollTop時(shí),它的內(nèi)容就不斷往上移動(dòng),抵達(dá)到dl的可視區(qū),把原來(lái)上面可見(jiàn)內(nèi)容擠掉,效果有點(diǎn)像設(shè)置了dl的margin-top為負(fù)數(shù)。繼續(xù)增加scrollTop,直到我們看到dd元素。這時(shí),我們要看一下dt元素了,原本它為空元素,克隆了dd元素的圖片,其實(shí)是為了起一個(gè)遮眼法的效果。當(dāng)dt元素完全被dd元素?cái)D出dl的可視區(qū)時(shí),我們驚訝地發(fā)現(xiàn),這時(shí)dl元素可視區(qū)的樣子和它最初的樣式是一模一樣的。dd元素拷貝dt元素的圖片的作用也在于此。但繼續(xù)往下走,就肯定會(huì)露餡,因?yàn)閐d元素下面就沒(méi)有元素了,沒(méi)有圖片給我們顯示了。因此就在這一刻,我們把dl的元素scrollTop打回原形,重新回到dt元素圖片的顯示中。
那么問(wèn)題是這一刻我們?cè)鯓哟_定呢?關(guān)鍵是這句“dt元素完全被dd元素?cái)D出dl的可視區(qū)”,我們可以取dt元素的offsetHeight,這是dt元素的高加上padding與border,也可以取dd的offsetTop,這是dd元素頂部到dl元素頂部的距離。考慮到IE的怪癖模式,我決定先用offsetTop。既然要用offsetTop,我們需要指定offsetParent。不過(guò)許多教程都忘記了為dl元素設(shè)置position:relative。因?yàn)樵贗E6中,offsetParent直接為元素的父元素,而IE7,IE8與標(biāo)準(zhǔn)瀏覽器則為離它最近的被定了位的父級(jí)元素,沒(méi)有則為body元素。
#marquee { position:relative; height:300px; width:200px; overflow:hidden; border:10px solid #369; } #marquee img { display:block; } #marquee dd { margin:0px; padding:0px; }
var Marquee = function(id){ try{document.execCommand("BackgroundImageCache", false, true);}catch(e){}; var container = document.getElementById(id), original = container.getElementsByTagName("dt")[0], clone = container.getElementsByTagName("dd")[0], speed = arguments[1] || 10; clone.innerHTML=original.innerHTML; var rolling = function(){ if(container.scrollTop == clone.offsetTop){ container.scrollTop = 0; }else{ container.scrollTop++; } } 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 司徒正美" /> <style type="text/css"> h1 { font:400 16px/1 "Microsoft YaHei",KaiTi_GB2312,SimSun } #marquee { position:relative; height:300px; width:200px; overflow:hidden; border:10px solid #369; } #marquee img { display:block; } #marquee dd { margin:0px; padding:0px; } </style> <script type="text/javascript"> var Marquee = function(id){ try{document.execCommand("BackgroundImageCache", false, true);}catch(e){}; var container = document.getElementById(id), original = container.getElementsByTagName("dt")[0], clone = container.getElementsByTagName("dd")[0], speed = arguments[1] || 10; clone.innerHTML=original.innerHTML; var rolling = function(){ if(container.scrollTop == clone.offsetTop){ container.scrollTop = 0; }else{ container.scrollTop++; } } 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> <dl id="marquee"> <dt> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s017.jpg" alt="javascript無(wú)縫滾動(dòng) by 司徒正美"/> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s018.jpg" alt="javascript無(wú)縫滾動(dòng) by 司徒正美"/> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s019.jpg" alt="javascript無(wú)縫滾動(dòng) by 司徒正美"/> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s020.jpg" alt="javascript無(wú)縫滾動(dòng) by 司徒正美"/> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s021.jpg" alt="javascript無(wú)縫滾動(dòng) by 司徒正美"/> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s022.jpg" alt="javascript無(wú)縫滾動(dòng) by 司徒正美"/> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s023.jpg" alt="javascript無(wú)縫滾動(dòng) by 司徒正美"/> </dt> <dd></dd> </dl>
上面的例子是向上滾動(dòng),向下滾動(dòng)只不過(guò)是一開(kāi)始把dl元素的scrollTop設(shè)置成dd元素的offsetTop的值,然后遞減就是!
<!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 司徒正美" /> <style type="text/css"> h1 { font:400 16px/1 "Microsoft YaHei",KaiTi_GB2312,SimSun } #marquee { height:300px; width:200px; overflow:hidden; position:relative; border:10px solid #F2F1D7; } #marquee img { display:block; } #marquee dd { margin:0px; padding:0px; } </style> <script type="text/javascript"> var Marquee = function(id){ try{document.execCommand("BackgroundImageCache", false, true);}catch(e){}; var container = document.getElementById(id), original = container.getElementsByTagName("dt")[0], clone = container.getElementsByTagName("dd")[0], speed = arguments[1] || 10; clone.innerHTML=original.innerHTML; container.scrollTop = clone.offsetTop; var rolling = function(){ if(container.scrollTop == 0){ container.scrollTop = clone.offsetTop; }else{ container.scrollTop--; } } 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> <dl id="marquee"> <dt> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s017.jpg" alt="javascript無(wú)縫滾動(dòng) by 司徒正美"/> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s018.jpg" alt="javascript無(wú)縫滾動(dòng) by 司徒正美"/> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s019.jpg" alt="javascript無(wú)縫滾動(dòng) by 司徒正美"/> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s020.jpg" alt="javascript無(wú)縫滾動(dòng) by 司徒正美"/> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s021.jpg" alt="javascript無(wú)縫滾動(dòng) by 司徒正美"/> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s022.jpg" alt="javascript無(wú)縫滾動(dòng) by 司徒正美"/> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s023.jpg" alt="javascript無(wú)縫滾動(dòng) by 司徒正美"/> </dt> <dd></dd> </dl>
至于向左滾動(dòng)就相對(duì)麻煩些。首先我們要把圖片橫著排列,包括dt元素里面的,還有后來(lái)克隆到dd元素的,這要求用到浮動(dòng)。但這還未完,我們還要讓dt元素與dd元素橫著排列,于是我們就得對(duì)dl元素進(jìn)行設(shè)置浮動(dòng)。同時(shí)我們還得對(duì)dl元素的寬設(shè)置一個(gè)很大的值,目的是讓它不換行,并且能一字排開(kāi)所有圖片。我設(shè)置為1000%,即瀏覽器的寬的十倍。對(duì)于圖片,它浮動(dòng)時(shí),左右之間都存在間隙,設(shè)置margin與padding為0這樣?,F(xiàn)的方法是無(wú)法去掉它們。只好走極端了,讓它們外套一個(gè)a元素,反正現(xiàn)實(shí)中當(dāng)我們點(diǎn)擊圖片時(shí)它一定會(huì)跳轉(zhuǎn)到另一個(gè)頁(yè)面或頁(yè)面的另一個(gè)地方,這就是用a元素來(lái)做的。由于a元素是內(nèi)聯(lián)元素,不存在盒子元素,它會(huì)向內(nèi)收縮,把圖片外面的空隙吞噬掉。最后,我們沒(méi)有理由一下子顯示所有圖片,因此我們?cè)僭赿l元素外面套一個(gè)div,在那里設(shè)置overflow與position與width等關(guān)鍵樣式。
<div id="marquee"> <dl> <dt> <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" ><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" ><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" ><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" ><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" ><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" ><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" ><img src="o_s023.jpg" alt="無(wú)縫滾動(dòng)"</a> </dt> <dd></dd> </dl> </div>
#marquee { position:relative; width: 400px; overflow:hidden; border: 10px solid #B45B3E; } #marquee img { border:0px; } #marquee dl, #marquee dt,#marquee dd,#marquee a { float:left; margin:0; padding:0; } #marquee dl{ width:1000%; height:150px; }
javascript就沒(méi)多大改動(dòng),只不過(guò)將offsetTop換成offsetLeft,scrollTop換成scrollLeft。因此熟悉CSS,真是好處多多。
var Marquee = function(id){ try{document.execCommand("BackgroundImageCache", false, true);}catch(e){}; var container = document.getElementById(id), original = container.getElementsByTagName("dt")[0], clone = container.getElementsByTagName("dd")[0], speed = arguments[1] || 10; clone.innerHTML=original.innerHTML; var rolling = function(){ if(container.scrollLeft == clone.offsetLeft){ container.scrollLeft = 0; }else{ container.scrollLeft++; } } 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í)器 }
<!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 > <style type="text/css"> h1 { font:400 16px/1 "Microsoft YaHei",KaiTi_GB2312,SimSun } #marquee { position:relative; width: 400px; overflow:hidden; border: 10px solid #B45B3E; } #marquee img { border:0px; } #marquee dl, #marquee dt,#marquee dd,#marquee a { float:left; margin:0; padding:0; } #marquee dl{ width:1000%; height:150px; } </style> <script type="text/javascript"> var Marquee = function(id){ try{document.execCommand("BackgroundImageCache", false, true);}catch(e){}; var container = document.getElementById(id), original = container.getElementsByTagName("dt")[0], clone = container.getElementsByTagName("dd")[0], speed = arguments[1] || 10; clone.innerHTML=original.innerHTML; var rolling = function(){ if(container.scrollLeft == clone.offsetLeft){ container.scrollLeft = 0; }else{ container.scrollLeft++; } } 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> <div id="marquee"> <dl> <dt> <a ><img src="o_s017.jpg" alt="javascript無(wú)縫滾動(dòng) by 司徒正美"/></a> <a ><img src="o_s018.jpg" alt="javascript無(wú)縫滾動(dòng) by 司徒正美"/></a> <a ><img src="o_s019.jpg" alt="javascript無(wú)縫滾動(dòng) by 司徒正美"/></a> <a ><img src="o_s020.jpg" alt="javascript無(wú)縫滾動(dòng) by 司徒正美"/></a> <a ><img src="o_s021.jpg" alt="javascript無(wú)縫滾動(dòng) by 司徒正美"/></a> <a ><img src="o_s022.jpg" alt="javascript無(wú)縫滾動(dòng) by 司徒正美"/></a> <a ><img src="o_s023.jpg" alt="javascript無(wú)縫滾動(dòng) by 司徒正美"/></a> </dt> <dd></dd> </dl> </div>
向右滾動(dòng)也不難,照瓢畫(huà)葫蘆就是!
<!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 > <style type="text/css"> h1 { font:400 16px/1 "Microsoft YaHei",KaiTi_GB2312,SimSun } #marquee { position:relative; width: 400px; overflow:hidden; border: 10px solid #8080C0; } #marquee img { border:0px; } #marquee dl, #marquee dt,#marquee dd,#marquee a { float:left; margin:0; padding:0; } #marquee dl{ width:1000%; height:150px; } </style> <script type="text/javascript"> var Marquee = function(id){ try{document.execCommand("BackgroundImageCache", false, true);}catch(e){}; var container = document.getElementById(id), original = container.getElementsByTagName("dt")[0], clone = container.getElementsByTagName("dd")[0], speed = arguments[1] || 10; clone.innerHTML=original.innerHTML; container.scrollLeft = clone.offsetLeft var rolling = function(){ if(container.scrollLeft == 0){ container.scrollLeft = clone.offsetLeft; }else{ container.scrollLeft--; } } 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> <div id="marquee"> <dl> <dt> <a ><img src="o_s017.jpg" alt="javascript無(wú)縫滾動(dòng) by 司徒正美"/></a> <a ><img src="o_s018.jpg" alt="javascript無(wú)縫滾動(dòng) by 司徒正美"/></a> <a ><img src="o_s019.jpg" alt="javascript無(wú)縫滾動(dòng) by 司徒正美"/></a> <a ><img src="o_s020.jpg" alt="javascript無(wú)縫滾動(dòng) by 司徒正美"/></a> <a ><img src="o_s021.jpg" alt="javascript無(wú)縫滾動(dòng) by 司徒正美"/></a> <a ><img src="o_s022.jpg" alt="javascript無(wú)縫滾動(dòng) by 司徒正美"/></a> <a ><img src="o_s023.jpg" alt="javascript無(wú)縫滾動(dòng) by 司徒正美"/></a> </dt> <dd></dd> </dl> </div>
再來(lái)一個(gè)滾動(dòng)文字的,感覺(jué)這東西與tab一樣,最大的優(yōu)點(diǎn)是在有限的空間顯示海量的信息。
<!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 > <style type="text/css"> h1 { font:400 16px/1 "Microsoft YaHei",KaiTi_GB2312,SimSun } #marquee,#marquee li { margin:0; padding:0; list-style:none; } #marquee { position:relative; height:100px; width:280px; overflow:hidden; border:10px solid #c0c0c0; } #marquee a { display:block; padding:5px; text-decoration:none; white-space: nowrap; color:#000; } #marquee a:hover{ background: #efefda; color:#3bcdfe } </style> <script type="text/javascript"> var Marquee = function(id){ try{document.execCommand("BackgroundImageCache", false, true);}catch(e){}; var container = document.getElementById(id), original = container.getElementsByTagName("li")[0], speed = arguments[1] || 10, clone = original.cloneNode(true); container.appendChild(clone); var rolling = function(){ if(container.scrollTop == clone.offsetTop){ container.scrollTop = 0; }else{ container.scrollTop++; } } 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> <ul id="marquee"> <li> <a href="08/08/1541914.html">一步步教你實(shí)現(xiàn)純CSS的柱形圖</a> <a href="09/02/1558998.html">javascript十個(gè)最常用的自定義函數(shù)</a> <a href="08/24/1552862.html">javascript鼠標(biāo)事件總結(jié)</a> <a href="09/14/1566157.html">一個(gè)很簡(jiǎn)單的淡入淡出相冊(cè)</a> <a href="09/18/1568925.html">純CSS相冊(cè)</a> <a href="08/13/1544365.html">一步步教你實(shí)現(xiàn)表格排序(第一部分)</a> </li> </ul>
到此這篇關(guān)于基于javascript的無(wú)縫滾動(dòng)動(dòng)畫(huà)實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)javascript無(wú)縫滾動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- 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)效果
- 基于javascript的無(wú)縫滾動(dòng)動(dòng)畫(huà)實(shí)現(xiàn)2
相關(guān)文章
js實(shí)現(xiàn)仿Windows風(fēng)格選項(xiàng)卡和按鈕效果實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)仿Windows風(fēng)格選項(xiàng)卡和按鈕效果的方法,可實(shí)現(xiàn)類(lèi)似windows選項(xiàng)卡風(fēng)格的tab標(biāo)簽效果,需要的朋友可以參考下2015-05-05webpack自動(dòng)化打包webpack-dev-server的實(shí)現(xiàn)
我們每次改完要打包的資源文件,和配置文件都是是輸入npx webpack命令手動(dòng)打包的,本文就來(lái)介紹一下webpack自動(dòng)化打包webpack-dev-server的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2023-07-07Javascript仿新浪游戲頻道鼠標(biāo)懸停顯示子菜單效果
這篇文章主要介紹了Javascript仿新浪游戲頻道鼠標(biāo)懸停顯示子菜單效果,涉及鼠標(biāo)事件及頁(yè)面元素結(jié)點(diǎn)的遍歷技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08每天一篇javascript學(xué)習(xí)小結(jié)(RegExp對(duì)象)
這篇文章主要介紹了javascript中的RegExp對(duì)象知識(shí)點(diǎn),對(duì)RegExp對(duì)象的基本使用方法,以及各種方法進(jìn)行整理,感興趣的小伙伴們可以參考一下2015-11-112020淘寶618理想生活列車(chē)自動(dòng)領(lǐng)喵幣js腳本的代碼
這篇文章主要介紹了2020淘寶618理想生活列車(chē)自動(dòng)領(lǐng)喵幣腳本,需要先安裝 auto.js腳本,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06javascript canvas API內(nèi)容整理
在本篇文章里小編給大家分享的是關(guān)于javascript canvas API內(nèi)容整理,有需要的朋友們可以跟著學(xué)習(xí)參考下。2020-02-02