欢迎访问:常州市武进区嘉泽中心小学网站 !今天是:
栏目列表
您现在的位置是:首页>>教师>>计算机技术>>网站制作技术>>文章内容
让网页自动滚屏
发布时间:2008-11-20   点击:   来源:本站原创   录入者:佚名
 

                                             让网页自动滚屏

     陈莎

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

一、页面中某块文字滚动 这种方法是巧妙地利用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等技术,可以让滚屏更灵活、平滑,读者可以自己试验,或许还会找出更方便有效的方法
附件:
    关闭窗口
    打印文档
    账号登录
    保持登录 忘记密码?
    账号与武进教师培训平台同步