無縫滾動好像是互聯網廣告最大的一個載體,可以用“無處不在”來形容它。不過它比起早期的閃光字體,浮動廣告算進步了。由於需求巨大,做前臺遲早會遇到它。我先給出結構層部分,再慢慢講解其實現原理。
我自認爲這個結構比網上那些純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.οnmοuseοver=function() {clearinterval(timer)}//鼠標移到marquee上時,清除定時器,停止滾動
container.οnmοuseοut=function() {timer=setinterval(rolling,speed)}//鼠標移開時重設定時器
}
window.onload = function(){
marquee("marquee");
}
javascript無縫滾動by 司徒正美
javascript無縫滾動(向上滾動) by 司徒正美
運行代碼
上面的例子是向上滾動,向下滾動只不過是一開始把dl元素的scrolltop設置成dd元素的offsettop的值,然後遞減就是!
javascript無縫滾動by 司徒正美
javascript無縫滾動(向下滾動) by 司徒正美
運行代碼
至於向左滾動就相對麻煩些。首先我們要把圖片橫着排列,包括dt元素裏面的,還有後來克隆到dd元素的,這要求用到浮動。但這還未完,我們還要讓dt元素與dd元素橫着排列,於是我們就得對dl元素進行設置浮動。同時我們還得對dl元素的寬設置一個很大的值,目的是讓它不換行,並且能一字排開所有圖片。我設置爲1000%,即瀏覽器的寬的十倍。對於圖片,它浮動時,左右之間都存在間隙,設置margin與padding爲0這樣常現的方法是無法去掉它們。只好走極端了,讓它們外套一個a元素,反正現實中當我們點擊圖片時它一定會跳轉到另一個頁面或頁面的另一個地方,這就是用a元素來做的。由於a元素是內聯元素,不存在盒子元素,它會向內收縮,把圖片外面的空隙吞噬掉。最後,我們沒有理由一下子顯示所有圖片,因此我們再在dl元素外面套一個div,在那裏設置overflow與position與width等關鍵樣式。
只不過將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.οnmοuseοver=function() {clearinterval(timer)}//鼠標移到marquee上時。
清除定時器。
停止滾動 container.οnmοuseοut=function() {timer=setinterval(rolling,speed)}//鼠標移開時重設定時器 }
