欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于javascript的無縫滾動動畫1

 更新時間：2020年08月07日 10:45:17   作者：司徒正美  
這篇文章主要介紹了基于javascript的無縫滾動動畫實現(xiàn)，文章通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

無縫滾動好像是互聯(lián)網(wǎng)廣告最大的一個載體，可以用“無處不在”來形容它。不過它比起早期的閃光字體，浮動廣告算進步了。由于需求巨大，做前臺遲早會遇到它。我先給出結(jié)構(gòu)層部分，再慢慢講解其實現(xiàn)原理。

<dl id="marquee">
 <dt>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s017.jpg" alt="無縫滾動"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s018.jpg" alt="無縫滾動"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s019.jpg" alt="無縫滾動"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s020.jpg" alt="無縫滾動"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s021.jpg" alt="無縫滾動"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s022.jpg" alt="無縫滾動"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s023.jpg" alt="無縫滾動"/>
 </dt>
 <dd></dd>
</dl>

我自認(rèn)為這個結(jié)構(gòu)比網(wǎng)上那些純DIV的結(jié)構(gòu)好許多，起碼可以節(jié)省許多id與class。都不知那個傻冒最先提出“DIV+CSS”這個說法，正確的說法應(yīng)該是"xhtml+CSS"。換言之，就是在宏觀的布局上，用塊狀元素代替table，由于DIV的默認(rèn)樣式較少，因此比較常用，table則回歸和專注于數(shù)據(jù)顯示。在微觀的格式化上，用CSS代替原來b、big、center、i 、s、small、 strike、tt這些單純用于樣式設(shè)置的標(biāo)簽，很明顯CSS的能力比它們更強大。

實現(xiàn)原理與純CSS相冊點擊錨點切換相應(yīng)的圖片差不多，都是利用scrollTop。過程如下，因為我們設(shè)置dl的overflow為hidden，所以其左邊的滾動條就不可見了。當(dāng)我們不斷增加其scrollTop時，它的內(nèi)容就不斷往上移動，抵達(dá)到dl的可視區(qū)，把原來上面可見內(nèi)容擠掉，效果有點像設(shè)置了dl的margin-top為負(fù)數(shù)。繼續(xù)增加scrollTop，直到我們看到dd元素。這時，我們要看一下dt元素了，原本它為空元素，克隆了dd元素的圖片，其實是為了起一個遮眼法的效果。當(dāng)dt元素完全被dd元素擠出dl的可視區(qū)時，我們驚訝地發(fā)現(xiàn)，這時dl元素可視區(qū)的樣子和它最初的樣式是一模一樣的。dd元素拷貝dt元素的圖片的作用也在于此。但繼續(xù)往下走，就肯定會露餡，因為dd元素下面就沒有元素了，沒有圖片給我們顯示了。因此就在這一刻，我們把dl的元素scrollTop打回原形，重新回到dt元素圖片的顯示中。

那么問題是這一刻我們怎樣確定呢？關(guān)鍵是這句“dt元素完全被dd元素擠出dl的可視區(qū)”，我們可以取dt元素的offsetHeight，這是dt元素的高加上padding與border，也可以取dd的offsetTop，這是dd元素頂部到dl元素頂部的距離?？紤]到IE的怪癖模式，我決定先用offsetTop。既然要用offsetTop，我們需要指定offsetParent。不過許多教程都忘記了為dl元素設(shè)置position:relative。因為在IE6中，offsetParent直接為元素的父元素，而IE7，IE8與標(biāo)準(zhǔn)瀏覽器則為離它最近的被定了位的父級元素，沒有則為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è)置定時器
 container.onmouseover=function() {clearInterval(timer)}//鼠標(biāo)移到marquee上時，清除定時器，停止?jié)L動
 container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠標(biāo)移開時重設(shè)定時器
}
window.onload = function(){
 Marquee("marquee");
}
<!doctype html>
<title>javascript無縫滾動 by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript無縫滾動 by 司徒正美" />
<meta name="description" content="javascript無縫滾動 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è)置定時器
 container.onmouseover=function() {clearInterval(timer)}//鼠標(biāo)移到marquee上時，清除定時器，停止?jié)L動
 container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠標(biāo)移開時重設(shè)定時器
 }
 window.onload = function(){
 Marquee("marquee");
 }
</script>
<h1>javascript無縫滾動(向上滾動) by 司徒正美</h1>

<dl id="marquee">
 <dt>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s017.jpg" alt="javascript無縫滾動 by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s018.jpg" alt="javascript無縫滾動 by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s019.jpg" alt="javascript無縫滾動 by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s020.jpg" alt="javascript無縫滾動 by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s021.jpg" alt="javascript無縫滾動 by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s022.jpg" alt="javascript無縫滾動 by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s023.jpg" alt="javascript無縫滾動 by 司徒正美"/>
 </dt>
 <dd></dd>
</dl>

上面的例子是向上滾動，向下滾動只不過是一開始把dl元素的scrollTop設(shè)置成dd元素的offsetTop的值，然后遞減就是！

<!doctype html>
<title>javascript無縫滾動 by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript無縫滾動 by 司徒正美" />
<meta name="description" content="javascript無縫滾動 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è)置定時器
 container.onmouseover=function() {clearInterval(timer)}//鼠標(biāo)移到marquee上時，清除定時器，停止?jié)L動
 container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠標(biāo)移開時重設(shè)定時器
 }
 window.onload = function(){
 Marquee("marquee");
 }
</script>
<h1>javascript無縫滾動(向下滾動) by 司徒正美</h1>

<dl id="marquee">
 <dt>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s017.jpg" alt="javascript無縫滾動 by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s018.jpg" alt="javascript無縫滾動 by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s019.jpg" alt="javascript無縫滾動 by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s020.jpg" alt="javascript無縫滾動 by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s021.jpg" alt="javascript無縫滾動 by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s022.jpg" alt="javascript無縫滾動 by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s023.jpg" alt="javascript無縫滾動 by 司徒正美"/>
 </dt>
 <dd></dd>
</dl>

至于向左滾動就相對麻煩些。首先我們要把圖片橫著排列，包括dt元素里面的，還有后來克隆到dd元素的，這要求用到浮動。但這還未完，我們還要讓dt元素與dd元素橫著排列，于是我們就得對dl元素進行設(shè)置浮動。同時我們還得對dl元素的寬設(shè)置一個很大的值，目的是讓它不換行，并且能一字排開所有圖片。我設(shè)置為1000%，即瀏覽器的寬的十倍。對于圖片，它浮動時，左右之間都存在間隙，設(shè)置margin與padding為0這樣?，F(xiàn)的方法是無法去掉它們。只好走極端了，讓它們外套一個a元素，反正現(xiàn)實中當(dāng)我們點擊圖片時它一定會跳轉(zhuǎn)到另一個頁面或頁面的另一個地方，這就是用a元素來做的。由于a元素是內(nèi)聯(lián)元素，不存在盒子元素，它會向內(nèi)收縮，把圖片外面的空隙吞噬掉。最后，我們沒有理由一下子顯示所有圖片，因此我們再在dl元素外面套一個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="無縫滾動"</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="無縫滾動"</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="無縫滾動"</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="無縫滾動"</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="無縫滾動"</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="無縫滾動"</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="無縫滾動"</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就沒多大改動，只不過將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è)置定時器
 container.onmouseover=function() {clearInterval(timer)}//鼠標(biāo)移到marquee上時，清除定時器，停止?jié)L動
 container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠標(biāo)移開時重設(shè)定時器
}
<!doctype html>
<title>javascript無縫滾動 by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript無縫滾動 by 司徒正美" />
<meta name="description" content="javascript無縫滾動 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è)置定時器
 container.onmouseover=function() {clearInterval(timer)}//鼠標(biāo)移到marquee上時，清除定時器，停止?jié)L動
 container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠標(biāo)移開時重設(shè)定時器
 }
 window.onload = function(){
 Marquee("marquee");
 }
</script>
<h1>javascript無縫滾動(向左滾動) by 司徒正美</h1>
<div id="marquee">
 <dl>
 <dt>
 <a ><img src="o_s017.jpg" alt="javascript無縫滾動 by 司徒正美"/></a>
 <a ><img src="o_s018.jpg" alt="javascript無縫滾動 by 司徒正美"/></a>
 <a ><img src="o_s019.jpg" alt="javascript無縫滾動 by 司徒正美"/></a>
 <a ><img src="o_s020.jpg" alt="javascript無縫滾動 by 司徒正美"/></a>
 <a ><img src="o_s021.jpg" alt="javascript無縫滾動 by 司徒正美"/></a>
 <a ><img src="o_s022.jpg" alt="javascript無縫滾動 by 司徒正美"/></a>
 <a ><img src="o_s023.jpg" alt="javascript無縫滾動 by 司徒正美"/></a>
 </dt>
 <dd></dd>
 </dl>
</div>

向右滾動也不難，照瓢畫葫蘆就是！

<!doctype html>
<title>javascript無縫滾動 by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript無縫滾動 by 司徒正美" />
<meta name="description" content="javascript無縫滾動 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è)置定時器
 container.onmouseover=function() {clearInterval(timer)}//鼠標(biāo)移到marquee上時，清除定時器，停止?jié)L動
 container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠標(biāo)移開時重設(shè)定時器
 }
 window.onload = function(){
 Marquee("marquee");
 }
</script>
<h1>javascript無縫滾動(向右滾動) by 司徒正美</h1>
<div id="marquee">
 <dl>
 <dt>
 <a ><img src="o_s017.jpg" alt="javascript無縫滾動 by 司徒正美"/></a>
 <a ><img src="o_s018.jpg" alt="javascript無縫滾動 by 司徒正美"/></a>
 <a ><img src="o_s019.jpg" alt="javascript無縫滾動 by 司徒正美"/></a>
 <a ><img src="o_s020.jpg" alt="javascript無縫滾動 by 司徒正美"/></a>
 <a ><img src="o_s021.jpg" alt="javascript無縫滾動 by 司徒正美"/></a>
 <a ><img src="o_s022.jpg" alt="javascript無縫滾動 by 司徒正美"/></a>
 <a ><img src="o_s023.jpg" alt="javascript無縫滾動 by 司徒正美"/></a>
 </dt>
 <dd></dd>
 </dl>
</div>

再來一個滾動文字的，感覺這東西與tab一樣，最大的優(yōu)點是在有限的空間顯示海量的信息。

<!doctype html>
<title>javascript無縫滾動 by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript無縫滾動 by 司徒正美" />
<meta name="description" content="javascript無縫滾動 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è)置定時器
 container.onmouseover=function() {clearInterval(timer)}//鼠標(biāo)移到marquee上時，清除定時器，停止?jié)L動
 container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠標(biāo)移開時重設(shè)定時器
 }
 window.onload = function(){
 Marquee("marquee");
 }
</script>
<h1>javascript無縫滾動(向上滾動) by 司徒正美</h1>
<ul id="marquee">
 <li>
 <a href="08/08/1541914.html">一步步教你實現(xiàn)純CSS的柱形圖</a>
 <a href="09/02/1558998.html">javascript十個最常用的自定義函數(shù)</a>
 <a href="08/24/1552862.html">javascript鼠標(biāo)事件總結(jié)</a>
 <a href="09/14/1566157.html">一個很簡單的淡入淡出相冊</a>
 <a href="09/18/1568925.html">純CSS相冊</a>
 <a href="08/13/1544365.html">一步步教你實現(xiàn)表格排序（第一部分）</a>
 </li>
</ul>

到此這篇關(guān)于基于javascript的無縫滾動動畫實現(xiàn)的文章就介紹到這了,更多相關(guān)javascript無縫滾動內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論