javascript 垂直輪播(跑馬燈、vertical carousel)
這邊使用一個別於<marquee>的用法
這是在網路上找到的
(很抱歉我忘記出處了 如果有人知道的話請告訴我 謝謝)
然後小小改了一點
主要是利用overflow跟scrollTop這兩個屬性
overflow:hidden的意思就是
當內容超過長度或寬度的時候
不顯示滾動條
而是直接隱藏超過的部份
scrollTop則是目前滾動條與最上面的距離
首先設定一個style(也可以直接放在標籤裡)
以下為《CSS》原始碼 .ann{overflow:hidden;height:20px;}
這是html的部份
包在外面的div高度跟裡面個別的div高度設定成一樣
這樣一次可以顯示一個
以下為《HTML》原始碼 <div id="ann_box" class="ann" style="width:100px;">
<div id="a1" class="ann"><a href="exp01.php" >exp01</a></div>
<div id="a2" class="ann"><a href="exp02.php" >exp02</a></div>
<div id="a3" class="ann"><a href="exp03.php" >exp03</a></div>
<div id="a4" class="ann"><a href="exp04.php" >exp04</a></div>
<div id="a5" class="ann"><a href="exp05.php" >exp05</a></div>
</div>
javascript的部份
以下為《JS》原始碼 function slideLine(box,stf,delay,speed,h)
{
//取得id
var slideBox = document.getElementById(box);
//預設值 delay:幾毫秒滾動一次(1000毫秒=1秒)
// speed:數字越小越快，h:高度
var delay = delay||1000,speed = speed||20,h = h||20;
var tid = null,pause = false;
//setInterval跟setTimeout的用法可以咕狗研究一下~
var s = function(){tid=setInterval(slide, speed);}
//主要動作的地方
var slide = function(){
//當滑鼠移到上面的時候就會暫停
if(pause) return;
//滾動條往下滾動 數字越大會越快但是看起來越不連貫，所以這邊用1
slideBox.scrollTop += 1;
//滾動到一個高度(h)的時候就停止
if(slideBox.scrollTop%h == 0){
//跟setInterval搭配使用的
clearInterval(tid);
//將剛剛滾動上去的前一項加回到整列的最後一項
slideBox.appendChild(slideBox.getElementsByTagName(stf)[0]);
//再重設滾動條到最上面
slideBox.scrollTop = 0;
//延遲多久再執行一次
setTimeout(s, delay);
}
}
//滑鼠移上去會暫停 移走會繼續動
slideBox.onmouseover=function(){pause=true;}
slideBox.onmouseout=function(){pause=false;}
//起始的地方，沒有這個就不會動囉
setTimeout(s, delay);
}
//網頁load完會執行一次
//五個屬性各別是：外面div的id名稱、包在裡面的標籤類型
//延遲毫秒數、速度、高度
slideLine('ann_box','div',2000,25,20);
按這裡可以看範例
不過如果原本有使用framework如prototype或是jquery的
可以直接找他們的plugin來使用(怎麼最後才講XD)
這裡的用法是
當如果這網頁沒有要load哪個framework的時候
但是又想要有個輪播功能
就可以節省load的時間囉
是不是～
注意：scrollTop、scrollLeft有些瀏覽器不支援(不過ie跟fx都有)
圖片：自動輪播頁籤 ie 與 mozilla 通用.png
圖片：
