让网页自动滚屏
2009-04-15 01:22
253 查看
网页自动滚屏分为页面中的滚动字幕和整个网页自动滚动,页面中的滚动字幕可以用在网页“公告版”或“最新新闻”等信息的发布,而整个网页自动滚动适合用户浏览一篇长达数十页的网文,免去了用户手动翻页的麻烦。下面介绍这两种技术的实现方法:
<!--双击自动滚屏Start-->
<SCRIPT language="">
var currentpos,timer;
function initialize()
{timer=setInterval("scrollwindow()",1);}
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
function New(para_URL)
{var URL =new String(para_URL)
window.open(URL,'','resizable,scrollbars')}
</SCRIPT>
<!--双击自动滚屏End-->
一、页面中某块文字滚动 |
这种方法是巧妙地利用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等技术,可以让滚屏更灵活、平滑,读者可以自己试验,或许还会找出更方便有效的方法 |
<SCRIPT language="">
var currentpos,timer;
function initialize()
{timer=setInterval("scrollwindow()",1);}
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
function New(para_URL)
{var URL =new String(para_URL)
window.open(URL,'','resizable,scrollbars')}
</SCRIPT>
<!--双击自动滚屏End-->
相关文章推荐
- 滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
- 让网页自动滚屏
- 让网页自动滚屏
- APP开发网页自动滚屏动态加载 页面滚动动态加载数据,页面下拉自动加载内容
- 滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
- 网页中自动滚屏效果
- 根据URL提取页面的Title,根据网页的charset自动判断Encoding
- Firefox扩展:文件更改后自动刷新网页
- 网页自动刷新代码
- 网页打开后自动执行木马
- 网页中引用优酷视频去广告自动播放代码[xyytit]
- [转]Delphi实现网页自动登陆
- ActiveX控件打包成Cab置于网页中自动下载安装
- androi自定义自动换行的View(类似网页的标签Tag)
- 网页自动跳转的5中方法
- 网页中的PDF自动跳到指定页
- FireFox网页布局时候内容需自动换行时float属性不起作用
- 网页背景自动切换效果
- 网页在手机上自动缩放100% 适配safari firefox 安卓原生浏览器
- 让打开网页自动最大化的脚本