首先如果文字向上滾動,那是其簡單的,只需要使用以下的代碼:
<marquee onMouseOver=this.stop() onMouseOut=this.start() scrollamount=1 scrolldelay=7 direction=up width="800">行的滾動的標(biāo)題<br>第二條網(wǎng)站測試行</marquee>
當(dāng)鼠標(biāo)放上去的時候,會自動停止,這樣用戶就能詳細(xì)看清每一行的文字,800是指這個滾動區(qū)域的px寬度,不設(shè)定高度的話,會隨著行數(shù)的增加而自動上下延伸。
倘若由下往上走的文字,只想看到一行一行的向上走,這樣一來是節(jié)省網(wǎng)站的布局的空間,二來看上去比較整潔,同時也顯得不亂(全行滾動會顯得很凌亂),就設(shè)置一下高度,比如25px,具體代碼如下:
<marquee onMouseOver=this.stop() onMouseOut=this.start() scrollamount=1 scrolldelay=7 direction=up width="800" height="25">只顯示一行的條的標(biāo)題<br>只顯示一行的第二條</marquee>
以上是區(qū)域、文字的滾動,當(dāng)然設(shè)定一行的也只能是文字,如果加個背景等,也可以稱之為區(qū)域。
運(yùn)行結(jié)果如下,見附圖一:
如果一個div,或是一個模塊整體向上滾動,該如何弄呢,這需要另外一套代碼,直接上代碼:
<div id="demo" style="overflow:hidden;height:22px;width:950px;">
<div id="demo1">
<table width="950" border="0" cellspacing="0" cellpadding="0" bgcolor="#004a98">
<tr>
<td height="24" align="left" valign="top"><a target="_blank" href="#" style=" color:#FFFFFF; font-size:14px; padding-
left:60px;">這是條新新聞的標(biāo)題</a></td>
</tr>
</table>
<table width="950" border="0" cellspacing="0" cellpadding="0" bgcolor="#004a98">
<tr>
<td height="24" align="left" valign="top"><a target="_blank" href="#" style=" color:#FFFFFF; font-size:14px; padding-
left:60px;">這是第二條向上滾動的</a></td>
</tr>
</table>
</div>
<div id="demo2"></div>
</div>
以下是腳本:
var speed=50
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
運(yùn)行結(jié)果如下,見附圖二:
中間的這個代碼:
<table width="950" border="0" cellspacing="0" cellpadding="0" bgcolor="#004a98">
<tr>
<td height="24" align="left" valign="top"><a target="_blank" href="#" style=" color:#FFFFFF; font-size:14px; padding-
left:60px;">這是第二條向上滾動的</a></td>
</tr>
</table>
就是滾動的模塊的內(nèi)容,可以弄成table,也可以布局成div,當(dāng)然這個模塊的尺寸要與上面的id為demo的一致,否則排版會出錯。
以上就是模塊、文字、區(qū)域向上滾動的代碼,通過以上的展示,相信大家應(yīng)該都能理解了吧!