我們一般都用Marquee標簽控制元素的滾動但是單向的Marquee滾動是不連續的每滾完一幕就會出現一次空白而下面介紹中的滾動則是連續的毫不間斷
下面為你介紹這是如何實現的
為了滾動能夠連續我們需要將字幕的內容復制多遍直到內容的高度不小於滾
動區高度的兩倍然後我們將溢出的滾動條隱藏掉用代碼控制滾動條向下移動(這時內容將向上移動)當滾動條滾動到最下方時理論上不能再往下滾動了於是我們立刻調整滾動條將它向上滾動到一個和當前畫面一樣的位置結果我們看到的就是連續的滾動了呵呵說的就是這麼簡單那做起來如何呢？我們看看是如何逐步實現的
＜div id=
marquees
> ＜!
這些是字幕的內容
你可以任意定義
> ＜a #
>鏈接一＜/a>
＜br> ＜a #
>鏈接二＜/a>
＜br> ＜a #
>鏈接三＜/a>
＜br> ＜a #
>鏈接四＜/a>
＜br> ＜!
字幕內容結束
>
＜/div>
＜!
以下是java
script代碼
>
＜script language=
java
script
>
＜!
marqueesHeight=
; //內容區高度
stopscroll=false; //這個變量控制是否停止滾動
with(marquees){
noWrap=true; //這句表內容區不自動換行
style
width=
; //於是我們可以將它的寬度設為
因為它會被撐大
style
height=marqueesHeight;
style
overflowY=
hidden
; //滾動條不可見
onmouseover=new Function(
stopscroll=true
); //鼠標經過
停止滾動
onmouseout=new Function(
stopscroll=false
); //鼠標離開
開始滾動
}
//這時候
內容區的高度是無法讀取了
下面輸出一個不可見的層
templayer
稍後將內容復制到裡面
document
write(
＜div id=
templayer
>＜/div>
);
function init(){ //初始化滾動內容
//多次復制原內容到
templayer
直到
templayer
的高度大於內容區高度
while(templayer
offsetHeight＜marqueesHeight){
templayer
innerHTML+=marquees
innerHTML;
} //把
templayer
的內容的
兩倍
復制回原內容區
marquees
innerHTML=templayer
innerHTML+templayer
innerHTML;
//設置連續超時
調用
scrollUp()
函數驅動滾動條
setInterval(
scrollUp()
);
}
document
body
onload=init;
preTop=
; //這個變量用於判斷滾動條是否已經到了盡頭
function scrollUp(){ //滾動條的驅動函數
if(stopscroll==true) return; //如果變量
stopscroll
為真
則停止滾動
preTop=marquees
scrollTop; //記錄滾動前的滾動條位置
marquees
scrollTop+=
; //滾動條向下移動一個像素
//如果滾動條不動了
則向上滾動到和當前畫面一樣的位置
//當然不僅如此
同樣還要向下滾動一個像素(+
)
if(preTop==marquees
scrollTop){
marquees
scrollTop=templayer
offsetHeight
marqueesHeight+
;
}
}
>
＜/script>
這樣就完成了感覺做起來也不難吧
From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19771.html
