这种方法是巧妙地利用HTML语言提供的标题元素<marquee>...</marquee>来实现活动字幕效果。
该标记语法格式如下：
<marquee
aligh=left|center|right|top|bottom
bgcolor=#n
direction=left|right|up|down
behavior=type
height＝n
hspace＝n
scrollamount=n
Scrolldelay=n
width=n
VSpace=n
loop＝n>
可以看出由于活动字幕的显示方式多种多样，可选的参数也很多。下面解释一下各参数的含义：
align：是设定活动字幕的位置，居左、居中、居右、靠上和靠下三种位置。
Bgcolor：用于设定活动字幕的背景颜色，一般是十六进制数。
Direction：用于设定活动字幕的滚动方向是向左、向右、向上、向下。
Behavior：用于设定滚动的方式，主要由三种方式："scroll"、"slide"和"alternate"。
Height：用于设定滚动字幕的高度。
Width：则设定滚动字幕的宽度。
Hspace和vspace：分别用于设定滚动字幕的左右边框和上下边框的宽度。
Scrollamount：用于设定活动字幕的滚动距离。
scrolldelay：用于设定滚动两次之间的延迟时间。
Loop：用于设定滚动的次数，当loop=-1表示一直滚动下去，直到页面更新。
实现的源代码如下：
<html>
<body>
<div align="center">
<TABLE border=0 cellPadding=0 cellSpacing=0 height=157 width=320>
<TBODY>
<TR>
<TD height=156 vAlign=top width=320>
<marquee direction=up height=156 onmouseout=this.scrollAmount=1 onmouseover=this.scrollAmount=0
scrollAmount=1 scrolldelay=20 scrollleft="0" scrolltop="0">
滚动字幕字幕内容第一行<br>
滚动字幕字幕内容第二行<br>
滚动字幕字幕内容第三行<br>
...<br>
</marquee>
</td>
</tr>
</table>
</div>
</body>
</html>
当鼠标移到marquee区域，触发onmouseover事件，滚屏暂停。
当鼠标移出marquee区域，触发onmouseout事件，滚屏继续。
二、整个网页自动滚动
使用一段JavaScript代码，调用scroll函数，即可实现此功能。
实现方法：
把下面代码copy入你html文件的<head>和</head>中即可：
<script>
<!--
locate = 0
function autoscroll()
{if (locate !=400 )
{locate++scroll(0,locate)
clearTimeout(timer)
var timer = setTimeout("autoscroll()",3)timer}
}
-->
</script>
把你html文件的<body>部分改为如下设置：
<body onload="autoscroll()" >
说明：可通过改动locate的数值来控制显示页面的长度（原代码中为locate!=400)。将“setTimeout("autoscroll()",3)”中的“3”改为其它的数字可控制速度。
以下为代码段:<SCRIPT language=javascript>
var currentpos,timer
function initialize()
{
timer=setInterval("scrollwindow()",10)
}
function sc(){
clearInterval(timer)
}
function scrollwindow()
{
currentpos=document.body.scrollTop
window.scroll(0,++currentpos)
if (currentpos != document.body.scrollTop)
sc()
}
document.onmousedown=sc
document.ondblclick=initialize
</SCRIPT>
========================================
把以上代码放在需要双击自动滚屏的页面的<head>代码中.就可以了
JS代码放到<head></head>区域中间。<head>
<SCRIPT language="JavaScript">
<!--
function scrollit(){
for (I=1I<=500I++){
self.scroll(1,I)
}
}
//-->
</SCRIPT>
</head>
<body onLoad="scrollit()">
………………
</body>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）