TShopping
標題:
無間斷圖片跑馬燈
[打印本頁]
作者:
woff
時間:
2009-1-15 12:54
標題:
無間斷圖片跑馬燈
來源 :
無間斷圖片跑馬燈
有用過Marquee來做圖片跑馬燈的人應該都知道當圖片跑完後,會等圖都跑完後才會再繼續的重跑。
若不知道的話,沒關係~我們來做一個看看。
<body>
<marquee style="overflow:hidden;width:350;background-color:red;">
<img src="0.gif" style="border:1px solid;width:80;">
<img src="1.gif" style="border:1px solid;width:80;">
<img src="2.gif" style="border:1px solid;width:80;">
<img src="3.gif" style="border:1px solid;width:80;">
<img src="4.gif" style="border:1px solid;width:80;">
<img src="5.gif" style="border:1px solid;width:80;">
<img src="6.gif" style="border:1px solid;width:80;">
<img src="7.gif" style="border:1px solid;width:80;">
</marquee>
</body>
複製代碼
我把Marquee加了背景色,然後放了8張圖片,醬就能做出圖片跑馬燈了,不過就如我一開始說的,要等做後一張圖跑過後,才會再重第一張圖繼續跑。這樣是不是感覺沒有連續的感覺呢?
嘿嘿~這次就是要教一種做法,讓圖片跑馬燈就像沒有間斷一樣的跑。但並不是用Marquee來做的唷!先來看Body的部份吧:
<body>
<div id="myDiv" style="overflow:hidden;width:350;background-color:red;">
<table> <tr>
<td id="pic1">
<table>
<tr>
<td><img src="0.gif" style="border:1px solid;width:80;"></td>
<td><img src="1.gif" style="border:1px solid;width:80;"></td>
<td><img src="2.gif" style="border:1px solid;width:80;"></td>
<td><img src="3.gif" style="border:1px solid;width:80;"></td>
<td><img src="4.gif" style="border:1px solid;width:80;"></td>
<td><img src="5.gif" style="border:1px solid;width:80;"></td>
<td><img src="6.gif" style="border:1px solid;width:80;"></td>
<td><img src="7.gif" style="border:1px solid;width:80;"></td>
</tr>
</table>
</td>
<td id="pic2"></td>
</tr>
</table>
</div>
</body>
複製代碼
我在Div裡面放了一個Table,這個Table只有一列(TR)兩行(TD),並給這兩行各一個id,然後在第一行內再放一個Table,這Table有一列(TR)八行(TD),每一行裡面都放一張圖片。我想各位應該都還聽的霧沙沙吧!來看一下圖例會比較好理解:
紅色框就是我們的Div,藍色框就是第一個Table,藍色Table有兩行,在第一行裡面又有一個青綠色框的Table,該青綠色Table只有一列,但是卻有八行,每一行都放了一個深綠色的矩形來表示;而藍色Table的第二行則沒有任何東西,所以它目前是被擠成一小塊。這張圖是重點所在,要看懂才能了解接下來的JavaScript是要做什麼用。
注意的是,一定要設Div的style中的overflow為hidden喔,醬才能把超出範圍的部份先隱藏起來,也就是看不到捲軸。
先來解釋一下等等JavaScript要怎麼做。
一開始我們不是在pic1內又放了一個Tabel,但pic2卻什麼都沒有,各位應該會覺得很奇怪吧!其實pic2是為了放跟pic1內的內容用的。ㄟ~我想應該聽不懂說什麼吧,用圖來表示一下:
在JavaScript裡面寫了一行pic2.innerHTML = pic1.innerHTML後,醬就會變成有兩個一模一樣的Table,且裡面的行列數都是一樣,當然內容也都是一樣。
這邊比較重點的是,雖然看不到Div的捲軸,但它右邊還是有很多部份都沒顯示出來,所以我們一樣可以透過Div的scrollLeft來看到那些看不到的部份。當Div的捲軸往右移動時,圖片就會往左邊來移動,假設Div的寬是350px、pic1的寬是640px(每張圖是80px乘以8張),所以當捲軸往右移動到超出pic1的寬時,就會先看到pic2的圖片,又因為pic2的圖片是從pic1複製來的,所以會先看到pic1中的第一張圖,醬是不是會讓人覺得圖片又從第一張接在一起了。若不懂的可以看說明圖:
當醬一直往右移動著,會讓pic1整個都在Div外了。
嘿嘿~注意聽喔,重點來了!當現在Div中的圖片都是pic2時,我們就讓Div的捲軸馬上又回到左邊,因為pic1跟pic2的圖片都一樣,所以會讓人錯以為是還是在看pic2的圖,但其實已經又回到pic1了,然後一直循環循環,醬就變成了無間斷的跑馬燈囉。
了解是怎麼一回事後,現在換看JavaScript:
<script type="text/javascript">
<!--
//變數Speed為設定捲軸的速度用 越小越快
var Speed=1;
//接受setInterval所回傳的值
var timer;
//取得myDiv的參考用的變數
var myDiv = document.getElementById("myDiv");
//取得pic2的參考用的變數
var pic2= document.getElementById("pic2");
//讓pic2的innerHTML等於pic1的innerHTML
pic2.innerHTML=document.getElementById("pic1").innerHTML;
//用來捲動myDiv捲軸用的主程式
function picMarquee(){
//若pic2的寬小於myDiv的scrollLeft,表示捲軸已經過了第一行
//所以讓Div的scrollLeft再回到原來的位置;反之 則繼續往右跑
if(pic2.offsetWidth - myDiv.scrollLeft <= 0){
myDiv.scrollLeft = 0;
}else{
myDiv.scrollLeft++;
}
}
//每Speed毫秒就執行一次pciMarquee()
timer=setInterval(picMarquee,Speed);
//當滑鼠在myDiv上時 就停止捲動
myDiv.onmouseover=function(){
clearInterval(timer);
}
//當滑鼠離開myDiv上時 就繼續往右捲動
myDiv.onmouseout=function(){
timer=setInterval(picMarquee,Speed);
}
//-->
</script>
複製代碼
再解釋完做法後,現在看JavaScript應該是很容易了解了吧!picMarquee()函式就是判斷Div是要繼續往右移動捲軸還是回到左邊。且當滑鼠移到Div上時,就停止移動圖片;若離開了Div,則繼續移動圖片,這些都是setInterval()函式的應用而已。
看完了之後應該會覺得,這一切都是幻覺~嚇不倒我滴!只是運用了很簡單的方法來造成這種錯覺。ㄟ~我想會有人問說,那若要讓圖片是往上跑的話,那要怎麼做呢?原理是一樣的,只是Table的構造要改一下就可以了。
我們就來看若要往上跑的話,Body的部份:
<body>
<div id="myDiv" style="overflow:hidden;height:250;width:110;background-color:red;">
<table cellpadding=0 cellspacing=0>
<tr>
<td id="pic1">
<table>
<tr>
<td><img src="0.gif" style="border:1px solid;width:100;height:100"></td>
</tr>
<tr>
<td><img src="1.gif" style="border:1px solid;width:100;height:100"></td>
</tr>
<tr>
<td><img src="2.gif" style="border:1px solid;width:100;height:100"></td>
</tr>
<tr>
<td><img src="3.gif" style="border:1px solid;width:100;height:100"></td>
</tr>
<tr>
<td><img src="4.gif" style="border:1px solid;width:100;height:100"></td>
</tr>
<tr>
<td><img src="5.gif" style="border:1px solid;width:100;height:100"></td>
</tr>
<tr>
<td><img src="6.gif" style="border:1px solid;width:100;height:100"></td>
</tr>
<tr>
<td><img src="7.gif" style="border:1px solid;width:100;height:100"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td id="pic2"></td>
</tr>
</table>
</div>
</body>
複製代碼
剛剛是在一個TR裡面放了八個TD(圖),現在則改成一個TR就放一個TD(圖)。
而JavaScript則要把原來判斷寬的部份改成高,移動Div左右的scrollLeft改成上下的scrollTop:
<script type="text/javascript">
<!--
//變數Speed為設定捲軸的速度用 越小越快
var Speed=1;
//接受setInterval所回傳的值
var timer;
//取得myDiv的參考用的變數
var myDiv = document.getElementById("myDiv");
//取得pic2的參考用的變數
var pic2= document.getElementById("pic2");
//讓pic2的innerHTML等於pic1的innerHTML
pic2.innerHTML=document.getElementById("pic1").innerHTML;
//用來捲動myDiv捲軸用的主程式
function picMarquee(){
//若pic2的高小於myDiv的scrollTop,表示捲軸已經過了第一行
//所以讓Div的scrollTop再回到原來的位置;反之 則繼續往下跑
if(pic2.offsetHeight - myDiv.scrollTop <= 0){
myDiv.scrollTop = 0;
}else{
myDiv.scrollTop++;
}
}
//每Speed毫秒就執行一次pciMarquee()
timer=setInterval(picMarquee,Speed);
//當滑鼠在myDiv上時 就停止捲動
myDiv.onmouseover=function() {
clearInterval(timer);
}
//當滑鼠離開myDiv上時 就繼續往下捲動
myDiv.onmouseout=function() {
timer=setInterval(picMarquee,Speed);
}
//-->
</script>
複製代碼
也可以在在圖片上加入超連結喔!
範例瀏覽:
http://abgne.myweb.hinet.net/0021/0021_1.html
http://abgne.myweb.hinet.net/0021/0021_2.html
http://abgne.myweb.hinet.net/0021/0021_3.html
歡迎光臨 TShopping (http://www.tshopping.com.tw/)
Powered by Discuz! X3.2