熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

使用Javascript制作連續滾動字幕

2013-11-15 11:51:48  來源: JSP教程 

  我們一般都用Marquee標簽控制元素的滾動但是單向的Marquee滾動是不連續的每滾完一幕就會出現一次空白而下面介紹中的滾動則是連續的毫不間斷

  下面為你介紹這是如何實現的

  為了滾動能夠連續我們需要將字幕的內容復制多遍直到內容的高度不小於滾 動區高度的兩倍然後我們將溢出的滾動條隱藏掉用代碼控制滾動條向下移動(這時內容將向上移動)當滾動條滾動到最下方時理論上不能再往下滾動了於是我們立刻調整滾動條將它向上滾動到一個和當前畫面一樣的位置結果我們看到的就是連續的滾動了呵呵說的就是這麼簡單那做起來如何呢?我們看看是如何逐步實現的

<div id=marquees> <! 這些是字幕的內容你可以任意定義 > <a #>鏈接一</a>
<br> <a #>鏈接二</a>
<br> <a #>鏈接三</a>
<br> <a #>鏈接四</a>
<br> <! 字幕內容結束 >
</div>
<! 以下是javascript代碼 >
<script language=javascript>
<!
marqueesHeight=; //內容區高度
stopscroll=false; //這個變量控制是否停止滾動
with(marquees){
noWrap=true; //這句表內容區不自動換行
stylewidth=; //於是我們可以將它的寬度設為因為它會被撐大
styleheight=marqueesHeight;
styleoverflowY=hidden; //滾動條不可見
onmouseover=new Function(stopscroll=true); //鼠標經過停止滾動
onmouseout=new Function(stopscroll=false); //鼠標離開開始滾動
}
//這時候內容區的高度是無法讀取了下面輸出一個不可見的層templayer稍後將內容復制到裡面
documentwrite(<div id=templayer
></div>);
function init(){ //初始化滾動內容
//多次復制原內容到templayer直到templayer的高度大於內容區高度
while(templayeroffsetHeight<marqueesHeight){
templayerinnerHTML+=marqueesinnerHTML;
} //把templayer的內容的兩倍復制回原內容區
marqueesinnerHTML=templayerinnerHTML+templayerinnerHTML;
//設置連續超時調用scrollUp()函數驅動滾動條
setInterval(scrollUp());
}
documentbodyonload=init;
preTop=; //這個變量用於判斷滾動條是否已經到了盡頭
function scrollUp(){ //滾動條的驅動函數
if(stopscroll==true) return; //如果變量stopscroll為真則停止滾動
preTop=marqueesscrollTop; //記錄滾動前的滾動條位置
marqueesscrollTop+=; //滾動條向下移動一個像素
//如果滾動條不動了則向上滾動到和當前畫面一樣的位置
//當然不僅如此同樣還要向下滾動一個像素(+)
if(preTop==marqueesscrollTop){
marqueesscrollTop=templayeroffsetHeightmarqueesHeight+;
}
}
>
</script>
  

  這樣就完成了感覺做起來也不難吧


From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19771.html
  • 上一篇文章:

  • 下一篇文章:
  • 推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.