让网页自动滚屏

原创 2001年04月30日 17:57:00

                                             让网页自动滚屏

     陈莎

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

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

javascript实现页面滚屏效果

当我们浏览网页的时候,时常会碰到可以滚动屏幕的炫酷网页,今天笔者对这一技术进行简单实现,效果不及读者理想中那般炫酷,主要针对滚屏的技术原理和思想进行分享和分析。本示例在页面右侧有五个数字标签,代表五个...
  • zhongguohaoshaonian
  • zhongguohaoshaonian
  • 2016年09月22日 20:51
  • 3320

让网页自动滚屏

                                             让网页自动滚屏     陈莎网页自动滚屏分为页面中的滚动字幕和整个网页自动滚动,页面中的滚动字幕可以用在网页“...
  • iBreathe
  • iBreathe
  • 2001年04月30日 17:57
  • 3508

页面回发后,让页面自动滚动到指定位置的一种简单的方法

最近某客户做实施,顺便完善一下程序。突然找到了一个老问题的解决方法。就是当用户按一个按钮后,希望回发后的页面滚到一个指定的位置,而不是页面的开头部分。以前看过一篇文章介绍了一种方法,当时也没有理...
  • jyk
  • jyk
  • 2008年03月12日 17:30
  • 2408

让网页自动滚屏

让网页自动滚屏网页自动滚屏分为页面中的滚动字幕和整个网页自动滚动,页面中的滚动字幕可以用在网页“公告版”或“最新新闻”等信息的发布,而整个网页自动滚动适合用户浏览一篇长达数十页的网文,免去了用户手动翻...
  • dreamwdt
  • dreamwdt
  • 2006年12月22日 14:45
  • 666

JavaScript实现网页的自动滚屏显示

如何实现网页的自动滚屏显示? 当双击网页的时候,网页将会自动向下滚动,再次单击时滚动停止。将下面的代码插入到之间:  var currentpos,timer; function initialize...
  • xinem
  • xinem
  • 2008年08月18日 16:18
  • 2294

【网页】div自动滚动效果实现

  • 2013年06月23日 12:48
  • 1KB
  • 下载

页面滚动到底部自动加载数据

  • 2015年04月29日 10:27
  • 27KB
  • 下载

QTextEdit 自动滚屏

//msndialog.h class MsnDialog : public QDialog {     Q_OBJECT public:     MsnDialog(QWidget *pa...
  • friendbaby
  • friendbaby
  • 2011年09月26日 16:16
  • 2765

APP开发网页自动滚屏动态加载 页面滚动动态加载数据,页面下拉自动加载内容

页面滚动动态加载数据,页面下拉自动加载内容 $(document).ready(function(){ var range = 50; ...
  • xiaoyao961
  • xiaoyao961
  • 2013年12月04日 12:00
  • 3123

实现双击网页后页面自动向上滚动

    var   currentpos,timer;       function   initialize()   {   timer=setInterval("scrollwindow()",...
  • rcyl2003
  • rcyl2003
  • 2007年04月19日 10:10
  • 936
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:让网页自动滚屏
举报原因:
原因补充:

(最多只允许输入30个字)