首先如果文字向上滾動(dòng),那是其簡(jiǎn)單的,只需要使用以下的代碼:
<marquee onMouseOver=this.stop() onMouseOut=this.start() scrollamount=1 scrolldelay=7 direction=up width="800">行的滾動(dòng)的標(biāo)題<br>第二條網(wǎng)站測(cè)試行</marquee>
當(dāng)鼠標(biāo)放上去的時(shí)候,會(huì)自動(dòng)停止,這樣用戶就能詳細(xì)看清每一行的文字,800是指這個(gè)滾動(dòng)區(qū)域的px寬度,不設(shè)定高度的話,會(huì)隨著行數(shù)的增加而自動(dòng)上下延伸。
倘若由下往上走的文字,只想看到一行一行的向上走,這樣一來(lái)是節(jié)省網(wǎng)站的布局的空間,二來(lái)看上去比較整潔,同時(shí)也顯得不亂(全行滾動(dòng)會(huì)顯得很凌亂),就設(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),當(dāng)然設(shè)定一行的也只能是文字,如果加個(gè)背景等,也可以稱之為區(qū)域。
運(yùn)行結(jié)果如下,見附圖一:
如果一個(gè)div,或是一個(gè)模塊整體向上滾動(dòng),該如何弄呢,這需要另外一套代碼,直接上代碼:
<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;">這是第二條向上滾動(dòng)的</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é)果如下,見附圖二:
中間的這個(gè)代碼:
<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;">這是第二條向上滾動(dòng)的</a></td>
</tr>
</table>
就是滾動(dòng)的模塊的內(nèi)容,可以弄成table,也可以布局成div,當(dāng)然這個(gè)模塊的尺寸要與上面的id為demo的一致,否則排版會(huì)出錯(cuò)。
以上就是模塊、文字、區(qū)域向上滾動(dòng)的代碼,通過以上的展示,相信大家應(yīng)該都能理解了吧!