效果預覽

下面我們就來詳細講解一下這種效果的制作方法：

首先，我們在樣式表里加入“.opacity {FILTER: alpha(opacity=100)”，看下面！

<style type="text/css">
<!--
.opacity {FILTER: alpha(opacity=100)}
-->
</style>

然后在html代碼中加入：

<script>
function movstar(a,time){
movx=setInterval("mov("+a+")",time)
}
function movover(){
clearInterval(movx)
}
function mov(a){
scrollx=new_date.document.body.scrollLeft
scrolly=new_date.document.body.scrollTop
scrolly=scrolly+a
new_date.window.scroll(scrollx,scrolly)
}
function o_down(theobject){
object=theobject
while(object.filters.alpha.opacity>60){
object.filters.alpha.opacity+=-10}
}
function o_up(theobject){
object=theobject
while(object.filters.alpha.opacity<100){
object.filters.alpha.opacity+=10}
}
function wback(){
if(new_date.history.length==0){window.history.back()}
else{new_date.history.back()}
}
</script>

然后在向上箭頭圖片的代碼中加入“class="opacity" onMouseDown=movover();movstar(-3,2) onMouseOut=movover();o_up(this) onMouseOver=movstar(-1,20);o_down(this) onMouseUp=movover();movstar(-1,20) alt="點住不放可以快速向上滾動"”。

如下所示：

<img src="images/up.gif" width=19 height=27 class="opacity" onMouseDown=movover();movstar(-3,2) onMouseOut=movover();o_up(this) onMouseOver=movstar(-1,20);o_down(this)onMouseUp=movover();movstar(-1,20) alt="點住不放可以快速向上滾動">

這就是控制文字向上滾動的代碼，當鼠標移動到up.gif圖片上時文字向上滾動，按動箭頭文字會加快向上滾動速度。

向下箭頭圖片的制作方法同上。在代碼中加入“class="opacity" onMouseDown=movover();movstar(3,2) onMouseOut=movover();o_up(this) onMouseOver=movstar(1,20);o_down(this) onMouseUp=movover();movstar(1,20) alt="點住不放可以快速向下滾動"”。

如下所示：

<img src="images/down.gif" width=19 height=19 class="opacity" onMouseDown=movover();movstar(3,2) onMouseOut=movover();o_up(this) onMouseOver=movstar(1,20);o_down(this) onMouseUp=movover();movstar(1,20) alt="點住不放可以快速向下滾動">

之后在要顯示文字的區域加上以下這段代碼：

<iframe border=0 frameborder=0 framespacing=0 height=120 marginheight=0 marginwidth=0 name=new_date noResize scrolling=no src="iframe.htm" width=200 vspale="0"></iframe>

連接一個叫iframe.htm的頁面。其中height=120 width=200控制iframe.htm頁面在當前頁面的顯示面積大小。編輯iframe.htm文件，放入你要更新的內容就行了。