最近有同學問我要製作一個垂直相片跑馬燈要怎麼製作

我們一般最常看到的就是 垂直文字跑馬燈

如果現在要改成圖片的話 就要修正一下javascript語法了

只要將下列語法 貼到<body></body>標籤內 即可以看到

Snap1.jpg 

--------------------------------------------------------- 

<script>
scrollheight = 150 ; //卷軸高
lineNum = 1;
boardheight=scrollheight * lineNum; //跑馬燈高
scrollwidth=500; //跑馬燈寬
scrollTimeOut = 10; //移動時間
scrollStopTime = 200 //停留時間

doScroll = true //是否要跑
scrollCountTime = 0; //目前時間
offSet = scrollheight; //偏移量
startSetp = 0;
function ScrollBluezz(){
    thisSc = document.all['scArea'];
thisSc.style.width = scrollwidth;
thisSc.style.height = boardheight;
thisSc.style.overflowX = "hidden";
thisSc.style.overflowY = "hidden";
thisSc.scrollTop = 0
setInterval("scrollUpBluezz()",scrollTimeOut)
}

function scrollUpBluezz(){
thisSc = document.all['scArea'];
if (doScroll == false) return //不跑
offSet ++
if (offSet == scrollheight + 1) {
  scrollCountTime ++
  offSet --
   if (scrollCountTime == scrollStopTime) {
offSet = 0
scrollCountTime = 0
   }
}else {
  startSetp = thisSc.scrollTop + (scrollheight * lineNum);
  thisSc.scrollTop ++
  if (startSetp == thisSc.scrollTop + (scrollheight * lineNum)) {
thisSc.scrollTop = scrollheight * (lineNum-1)
thisSc.scrollTop ++
  }
}
}

</script>
<div id="scArea">
<table border="0" cellpadding="0" cellspacing="0">
<tr><td height="150">
<img src="
http://p.bluezz.tw/s_564_1110.jpg" height="150"></td>
  <td><a href="
http://bluezz.tw/c.php?id=564">猴探井遊憩區-觀看夜景好去處</a></td>
</tr>
<tr><td height="150"><img src="
http://p.bluezz.tw/s_702_1214.jpg" height="150"></td>
  <td><a href="
http://bluezz.tw/c.php?id=702">百果山風景區-登山、夜景</a></td>
</tr>
<tr>
  <td height="150"><img src="
http://p.bluezz.tw/s_635_1279.jpg" width="200" height="150"></td>
  <td height="50"><a href="
http://bluezz.tw/c.php?id=635">銀行山-牧場,夜景</a></td>
</tr>
<tr>
  <td height="150"><img src="
http://p.bluezz.tw/s_564_1110.jpg" height="150"></td>
  <td><a href="
http://bluezz.tw/c.php?id=564">猴探井遊憩區-觀看夜景好去處</a></td>
</tr>
</table>
</div>
<script>ScrollBluezz();</script>

arrow
arrow
    全站熱搜

    雞蛋貓異想世界 發表在 痞客邦 留言(1) 人氣()