這邊使用一個別於<marquee>的用法
這是在網路上找到的
(很抱歉我忘記出處了 如果有人知道的話請告訴我 謝謝)
然後小小改了一點
主要是利用overflow跟scrollTop這兩個屬性
overflow:hidden的意思就是
當內容超過長度或寬度的時候
不顯示滾動條
而是直接隱藏超過的部份
scrollTop則是目前滾動條與最上面的距離
首先設定一個style(也可以直接放在標籤裡)
.ann{overflow:hidden;height:20px;}
這是html的部份
包在外面的div高度跟裡面個別的div高度設定成一樣
這樣一次可以顯示一個
<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的用法可以咕狗研究一下~
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都有)
通告： Life["Breathing"] » javascript 垂直捲動選單
通告： Life["Breathing"] » javascript 水平捲動選單
很實用的資訊，解決了我目前的問題
謝謝分享！
歐歐~可以幫得上忙我很高興~:D
請問這個範例只有一筆一筆可以轉，假如我要一次有5筆資料可以輪流向上轉上去，要怎麼做到呢?謝謝
可以看一下範例頁面
http://ex.hsin.tw/exp06.php
我有加上 當多個的時候要怎麼修改
有兩種方式都可以用
一種是改變html 就是把原本的div高度調高 裡面放多個元素
或是改變js 判斷輪播一次要把幾個元素往後面擺
看一下範例的原始碼應該就可以瞭解囉
請問一下，如果我想要利用按鈕讓資料轉上或轉下，該如何修改~~~
還有當我轉下時，第一筆資料會加到最後一筆，那如果我要轉上時，該如何把最後一筆資料加到第一筆呢???
這篇文章的東西要改變轉上轉下好像沒辦法 (或是我比較遜orz)
因為scrollTop的關係 換的時候可能會有跳動、不連續的畫面出現
可能要找其他的方法
至於換方向變成轉上的我已經加在練習頁上了
http://ex.hsin.tw/index.php?type=javascript&act=06
在最下面
有小小更改一點東西
主要是先將scrollTop設為跟scrollHeight一樣
也就是跑到那個容器的最下面(捲軸拉到最下面的意思)
接著的動作就跟原本的差不多
而要把最後一筆加到第一筆
是使用insertBefore
字面上應該可以了解就是 插入到之前的意思 囉
用法是
容器.insertBefore(最後一個node , 第一個node);
這是例子
var s=document.getElementById(‘ann_box’);
s.insertBefore(s.getElementsByTagName(‘div’)[s.getElementsByTagName('div').length-1],s.getElementsByTagName(‘div’)[0]);
請問,如果要讓它自動上下捲動,但滑鼠指到時停止,要改哪些部份呢? 謝謝!
來自 taioaan
目前這個版本已經可以滑鼠指到的時候會停止
你的問題是這個嗎?
請問這個要怎麼弄呢??
我把javascript的部分貼在 裡
再放到 裡
html部分放在裡
可是他不會動耶><"
麻煩版主幫我解答*跪求，謝謝
*sorry，上一篇沒弄好，還請刪除，謝謝
我看不懂你的問題
你有完整的原始碼放在網路上嗎?
sorry,
我是把javascript的部分貼在 script標籤 裡
再放到 head 標籤 裡
html部分放在 body標籤 裡
可是他不會動><"
實在不理解為什麼會這樣
沒有碼我也不確定你的問題在哪
有可能的一個問題是
你應該要把script部份 擺在html碼之後
如果在操作的html碼還沒生成前 就執行js
這樣會因為找不到標籤 而有發生錯誤
ex:
<html>
<body>
html的部份
…
javascript碼的部份
</body>
</html>
如果堅持要擺在<head>中的話
就要用onload之類的東西來使用
如果需要的話再深入研究吧 咕狗看看
不然就是用上面講的 把script碼 擺在html碼之後
可以了可以了!!
謝謝版主的幫忙:))
請問版大:
我的字數較長,但版面很小,
我想要div裡的字數用br斷行後,仍可一起輪動….
可否讓高度增加為兩行輪動….
我改變div的height沒用
我改變js裡的h,變成跑馬的篇幅變高,但字還是被蓋住
我改變function裡的高度參數也沒用
請問有辦法嗎？
謝謝
以範例頁來說明的話 要改兩個地方
假設是要變成兩倍為40px
1. div.ann的高度改成40px –> height:40px;
2. 丟進function的最後一個參數改成40 –> slideLine(‘ann_box’,'div’,2000,25,40);
不同的高度就是依此類推
這樣就可以增加高度了
每個div就可以加br增加內容
感謝阿，正好在找這類的JS code，原本用《marquee》太醜，感謝分享: )
請問版主，這個跑馬燈有辦法改成左右輪播的嗎？
我把裡面三個scrollTop都改成scrollLeft
然後原本輸入高值的地方改為寬值，但是DeBug出來卻變成不會滑動
直接切成下一張圖片。
不過其他部分都有正確運作。
請問是不是還有什麼地方需要修改呢？
請參考
http://ex.hsin.tw/index.php?type=javascript&act=08
這頁是水平選單 用類似這頁的作法就可以改成水平輪播
改用scrollLeft需要多加兩個div在外面
並設定css
下面這則是我改過的
http://ex.hsin.tw/index.php?type=javascript&act=062
往左輪播
感謝您，大概知道要怎麼用了：）
多謝幫忙~
喔耶~