首页 理论教育 基于JavaScript网页编程:实现自动滚屏功能

基于JavaScript网页编程:实现自动滚屏功能

时间:2023-10-18 理论教育 版权反馈
【摘要】:可以监听document对象的ondblclick事件和onmousedown事件。运行页面,可发现因为页面内容较多,浏览器自动出现了垂直滚动条,如图上机7.1所示。图上机7.1页面内容较多在中的脚本块中编写脚本代码。运行页面,在页面中双击鼠标,可发现已经实现自动向下滚动。

基于JavaScript网页编程:实现自动滚屏功能

完成本任务所用到的主要知识点:

➢事件和事件处理程序

➢document对象的ondblclick事件和onmousedown事件

➢window对象的scrollBy()方法

某些小说或新闻类的页面因内容很多而变得很长,浏览者若要看完整个页面则需不停地拖动垂直滚动条,以浏览到页面的其他部分。考虑提供一种页面自动滚动的机制,在浏览者双击页面时页面开始自动向下滚动,浏览者将鼠标按下则停止滚动。

可以监听document对象的ondblclick事件和onmousedown事件。页面滚动可以使用window对象的scrollBy()方法来实现。

(1)创建网页文档。

(2)在<body></body>内编写脚本,模拟页面内容。(www.xing528.com)

运行页面,可发现因为页面内容较多,浏览器自动出现了垂直滚动条,如图上机7.1所示。

图上机7.1 页面内容较多

(3)在<head></head>中的<script></script>脚本块中编写脚本代码。

运行页面,在页面中双击鼠标,可发现已经实现自动向下滚动。

(4)在<head></head>中的<script></script>脚本块中继续编写脚本代码。

(5)运行页面,测试功能。

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

我要反馈