学院首页>网页制作>Javascript>让网页自动滚屏

让网页自动滚屏

作者:陈莎 来源:计算机世界 添加时间:2006-5-21 9:22:34
 网页自动滚屏分为页面中的滚动字幕和整个网页自动滚动,页面中的滚动字幕可以用在网页“公告版”或“最新新闻”等信息的发布,而整个网页自动滚动适合用户浏览一篇长达数十页的网文,免去了用户手动翻页的麻烦。下面介绍这两种技术的实现方法: 
一、页面中某块文字滚动 
这种方法是巧妙地利用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"> 
滚动字幕字幕内容第一行
 
滚动字幕字幕内容第二行
 
滚动字幕字幕内容第三行
 
...
 
</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”改为其它的数字可控制速度。  
实现网页内容的滚屏还有许多其他的方法,诸如使用“图层(LAYER)”结合JavaScript等技术,可以让滚屏更灵活、平滑,读者可以自己试验,或许还会找出更方便有效的方法。 
站内搜索