让网页自动滚屏

最新推荐文章于 2025-09-18 12:46:15 发布

原创最新推荐文章于 2025-09-18 12:46:15 发布 · 6.5k 阅读

·

0

·

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

文章标签：

#scroll #javascript #活动 #behavior #timer #html

Internet开发专栏收录该内容

8 篇文章

订阅专栏

博客涉及JavaScript和HTML相关内容，包含scroll、behavior、timer等信息技术元素，可能围绕网页滚动效果等方面展开，利用JavaScript实现特定功能。

让网页自动滚屏

陈莎

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

一、页面中某块文字滚动

这种方法是巧妙地利用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等技术，可以让滚屏更灵活、平滑，读者可以自己试验，或许还会找出更方便有效的方法

评论 1

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。