HTML网页中自动滚屏的代码

html-css05

HTML网页中自动滚屏的代码,第1张

JS代码放到<head></head>区域中间。

<head>

<SCRIPT language="JavaScript">

<!--

function scrollit(){

for (I=1I<=500I++){

self.scroll(1,I)

}

}

//-->

</SCRIPT>

</head>

<body onLoad="scrollit()">

………………

</body>

一、页面中某块文字滚动

这种方法是巧妙地利用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>代码中.就可以了