↓ ↓ 請免費贊助本站,只需1秒時間 ↓ ↓

2013/04/06

[教學] 利用 Javascript 顯示文字垂直輪播效果

文字垂直輪播效果[註1],就像是垂直版的跑馬燈。

以下是此效果的 CSS 語法、HTML 語法和 Javascript 語法。已經知道如何使用的人,可以直接複製以下語法。如果不知道該如何運用,可以參考語法之後的教學說明。

CSS 語法
將下列語法置入 CSS 區塊中。

.chaoverscroll{overflow:hidden;height:20px;}
HTML 語法
下列語法中的「exp01」代表欲顯示的文字;「exp01.php」則表示可為此文字加上連結。

<div id="chaoverscroll_box" class="chaoverscroll" style="width:100px;">
<div id="a1" class="chaoverscroll"><a href="exp01.php" >exp01</a></div>
<div id="a2" class="chaoverscroll"><a href="exp02.php" >exp02</a></div>
<div id="a3" class="chaoverscroll"><a href="exp03.php" >exp03</a></div>
<div id="a4" class="chaoverscroll"><a href="exp04.php" >exp04</a></div>
<div id="a5" class="chaoverscroll"><a href="exp05.php" >exp05</a></div>
</div>

Javascript 語法
下列語法中已包含設定值之說明,可依說明自行調整。

<script type="text/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的用法可以咕狗研究一下~
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('chaoverscroll_box','div',2000,25,20);
</script>

使用教學 (以下所有圖片,點選後可放大)

以下教學內容以 Blogger 系統示範,若使用於其他部落格或網站,此方法亦可作為參考。

1. 由於會更改範本內容,因此建議使用前先備份範本

2. 進入管理後台,切換到「範本」,點選「編輯 HTML」。

















3. 複製 CSS 語法,並貼到範本之中。我自己是貼到「Widgets」的區塊中。

















4. 回到管理後台,切換至「版面配置」,點選「新增小工具」。










5. 點選「HTML/JavaScript」。























6. 將「HTML 語法」和「Javascript 語法」依序貼入「內容」中之後,點選「儲存」。「標題」可留空。

【版權資訊】(引用規定)
作者:ChaoRC
網址:http://www.chaofree.com/2013/04/javascript-vertical-carousel.html

備註
[註1] 資料來源


關鍵字:Javascript, HTML, CSS, 垂直跑馬燈效果, 垂直滾動跑馬燈效果

沒有留言:

張貼留言

[1] 本站留言區屬於即時顯示,任何留言者之言論不代表本站立場,發表意見前請自行審酌留言內容。本站保留刪除垃圾留言、廣告留言、不當留言及違法言論之權力,若造成不便敬請見諒。

[2] 一旦您於本站發表意見,即視為知悉並同意本站之網站聲明中之各項內容。

[3] 如有在本篇文章留言,建議勾選留言區右下角的「通知我」,以利收到後續回覆通知。

[4] 留言區可以使用HTML標記,例如「< b >, < i >, < a >...」等。