首先如果文字向上滚动,那是其简单的,只需要使用以下的代码:
<marquee onMouseOver=this.stop() onMouseOut=this.start() scrollamount=1 scrolldelay=7 direction=up width="800">行的滚动的标题<br>第二条网站测试行</marquee>
当鼠标放上去的时候,会自动停止,这样用户就能详细看清每一行的文字,800是指这个滚动区域的px宽度,不设定高度的话,会随着行数的增加而自动上下延伸。
倘若由下往上走的文字,只想看到一行一行的向上走,这样一来是节省网站的布局的空间,二来看上去比较整洁,同时也显得不乱(全行滚动会显得很凌乱),就设置一下高度,比如25px,具体代码如下:
<marquee onMouseOver=this.stop() onMouseOut=this.start() scrollamount=1 scrolldelay=7 direction=up width="800" height="25">只显示一行的条的标题<br>只显示一行的第二条</marquee>
以上是区域、文字的滚动,当然设定一行的也只能是文字,如果加个背景等,也可以称之为区域。
运行结果如下,见附图一:
如果一个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;">这是条新新闻的标题</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)}
运行结果如下,见附图二:
中间的这个代码:
<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>
就是滚动的模块的内容,可以弄成table,也可以布局成div,当然这个模块的尺寸要与上面的id为demo的一致,否则排版会出错。
以上就是模块、文字、区域向上滚动的代码,通过以上的展示,相信大家应该都能理解了吧!