让网页自动滚屏

陈莎

  网页自动滚屏分为页面中的滚动字幕和整个网页自动滚动,页面中的滚动字幕可以用在网页“公告版”或“最新新闻”等信息的发布,而整个网页自动滚动适合用户浏览一篇长达数十页的网文,免去了用户手动翻页的麻烦。下面介绍这两种技术的实现方法:

  一、页面中某块文字滚动 
  这种方法是巧妙地利用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”改为其它的数字可控制速度。  
实现网页内容的滚屏还有许多其他的方法,诸如使用“图层(LAYER)”结合JavaScript等技术,可以让滚屏更灵活、平滑,读者可以自己试验,或许还会找出更方便有效的方法 

文章评级:★★★★★☆☆☆☆ 发表者:{佚名(127.0.0.*)} 3-29 [ 0]

 分享到:
 
 
我是:
本站注册用户
用户名: 密码:
非本站注册用户
我来评论:

评论字数在2000字以内。评论即可得2分,评论被采用后,根据评级可得到相应的积分和智慧果。
比如:评论评级为5,可得50分和5个智慧果。

 

 
 
 
 
 
 
































 

© 版权所有  2001-2024 知识网站
Copyright (C) 2001-2024 allzhishi.com All rights reserved
联系我们 — 电话:15973023232  微信:zhishizaixian  ICP备案号:湘ICP备08003211号-4