javascript無縫滾動
來源：互聯網
上載者：User
<!doctype html><title>javascript無縫滾動 by 司徒正美</title><meta charset="utf-8"/><meta name="keywords" content="javascript無縫滾動 by 司徒正美" /><meta name="description" content="javascript無縫滾動 by 司徒正美" /><base href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/">無縫滾動好像是互連網廣告最大的一個載體，可以用“無處不在”來形容它。不過它比起早期的閃光字型，浮動廣告算進步了。由於需求巨大，做前台遲早會遇到它。我先給出結構層部分，再慢慢講解其實現原理。<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>我自認為這個結構比網上那些純DIV的結構好許多，起碼可以節省許多id與class。都不知那個傻冒最先提出“DIV+CSS”這個說法，正確的說法應該是"xhtml+CSS"。換言之，就是在宏觀的布局上，用塊狀元素代替table，由於DIV的預設樣式較少，因此比較常用，table則迴歸和專註於資料顯示。在微觀的格式化上，用CSS代替原來b、big、center、i 、s、small、 strike、tt這些單純用於樣式設定的標籤，很明顯CSS的能力比它們更強大。實現原理與純CSS相簿點擊錨點切換相應的圖片差不多，都是利用scrollTop。過程如下，因為我們設定dl的overflow為hidden，所以其左邊的捲軸就不可見了。當我們不斷增加其scrollTop時，它的內容就不斷往上移動，抵達到dl的可視區，把原來上面可見內容擠掉，效果有點像設定了dl的margin-top為負數。繼續增加scrollTop，直到我們看到dd元素。這時，我們要看一下dt元素了，原本它為空白元素，複製了dd元素的圖片，其實是為了起一個遮眼法的效果。當dt元素完全被dd元素擠出dl的可視區時，我們驚訝地發現，這時dl元素可視區的樣子和它最初的樣式是一模一樣的。dd元素拷貝dt元素的圖片的作用也在於此。但繼續往下走，就肯定會露餡，因為dd元素下面就沒有元素了，沒有圖片給我們顯示了。因此就在這一刻，我們把dl的元素scrollTop打回原形，重新回到dt元素圖片的顯示中。那麼問題是這一刻我們怎樣確定呢？關鍵是這句“dt元素完全被dd元素擠出dl的可視區”，我們可以取dt元素的offsetHeight，這是dt元素的高加上padding與border，也可以取dd的offsetTop，這是dd元素頂部到dl元素頂部的距離。考慮到IE的怪癖模式，我決定先用offsetTop。既然要用offsetTop，我們需要指定offsetParent。不過許多教程都忘記了為dl元素設定position:relative。因為在IE6中，offsetParent直接為元素的父元素，而IE7，IE8與標準瀏覽器則為離它最近的被定了位的父級元素，沒有則為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)//設定定時器 container.onmouseover=function() {clearInterval(timer)}//滑鼠移到marquee上時，清除定時器，停止滾動 container.onmouseout=function() {timer=setInterval(rolling,speed)}//滑鼠移開時重設定時器}window.onload = function(){ Marquee("marquee");}上面的例子是向上滾動，向下滾動只不過是一開始把dl元素的scrollTop設定成dd元素的offsetTop的值，然後遞減就是！至於向左滾動就相對麻煩些。首先我們要把圖片橫著排列，包括dt元素裡面的，還有後來複製到dd元素的，這要求用到浮動。但這還未完，我們還要讓dt元素與dd元素橫著排列，於是我們就得對dl元素進行設定浮動。同時我們還得對dl元素的寬設定一個很大的值，目的是讓它不換行，並且能一字排開所有圖片。我設定為1000%，即瀏覽器的寬的十倍。對於圖片，它浮動時，左右之間都存在間隙，設定margin與padding為0這樣常現的方法是無法去掉它們。只好走極端了，讓它們外套一個a元素，反正現實中當我們點擊圖片時它一定會跳轉到另一個頁面或頁面的另一個地方，這就是用a元素來做的。由於a元素是內嵌元素，不存在盒子項目，它會向內收縮，把圖片外面的空隙吞噬掉。最後，我們沒有理由一下子顯示所有圖片，因此我們再在dl元素外面套一個div，在那裡設定overflow與position與width等關鍵樣式。<div id="marquee"> <dl> <dt> <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s017.jpg" alt="無縫滾動"</a> <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s018.jpg" alt="無縫滾動"</a> <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s019.jpg" alt="無縫滾動"</a> <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s020.jpg" alt="無縫滾動"</a> <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s021.jpg" alt="無縫滾動"</a> <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s022.jpg" alt="無縫滾動"</a> <a href="http://www.cnblogs.com/rubylouvre/"><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)//設定定時器 container.onmouseover=function() {clearInterval(timer)}//滑鼠移到marquee上時，清除定時器，停止滾動 container.onmouseout=function() {timer=setInterval(rolling,speed)}//滑鼠移開時重設定時器}向右滾動也不難，照瓢畫葫蘆就是！再來一個滾動文字的，感覺這東西與tab一樣，最大的優點是在有限的空間顯示海量的資訊。<h1>javascript無縫滾動(向左滾動) by 司徒正美</h1><div id="marquee"> <dl> <dt> <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s017.jpg" alt="javascript無縫滾動 by 司徒正美"/></a> <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s018.jpg" alt="javascript無縫滾動 by 司徒正美"/></a> <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s019.jpg" alt="javascript無縫滾動 by 司徒正美"/></a> <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s020.jpg" alt="javascript無縫滾動 by 司徒正美"/></a> <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s021.jpg" alt="javascript無縫滾動 by 司徒正美"/></a> <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s022.jpg" alt="javascript無縫滾動 by 司徒正美"/></a> <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s023.jpg" alt="javascript無縫滾動 by 司徒正美"/></a> </dt> <dd></dd> </dl></div>
