跑馬燈 - 垂直輪播
在此蒐集了兩個方法，提供給各位參考，希望對您有幫助囉 ~
第一種方法：<marquee></marquee>
● 屬性參數介紹：
方向設定：direction="參數值"；參數值有 up（向上）、dun（向下）、left（向左）、right（向右）。
對齊設定：align="參數值"；參數值有 top（向上對齊）、midden（垂直至中）、botton（項下對齊）。
速度設定：scrollamount="參數值" ；參數值為數字，通常設定 1~10 的範圍，數字越大跑得越快。
長度設定：height="參數值"；參數為數字，自行設定。
寬度設定：width="參數值"；參數為數字，自行設定。
行為設定：behavior="參數值"；參數有 alternate（來回跑）、slide（跑入後停止）。
背景顏色：bgcolor="參數值"；參數可設定為顏色的色碼，不設定則沒有顏色。
● 語法使用範例：
基本款式：<marquee>純文字</marquee>
文字連結：<marquee><a href="連結網址">連結文字</a></marquee>
圖片：<marquee><img src="圖片網址"></marquee>
滑鼠移入後自動停止的方法：<marquee onMouseOver="this.stop()" onMouseOut="this.start()"></marquee>
第二種方法：可彈性設定「延遲秒數」
● 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 的部分：
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的用法可以Google研究一下~
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);
● css 的部分：
.ann{overflow:hidden;height:20px;}
文章標籤
全站熱搜
