`
guochongcan
  • 浏览: 326835 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

如何实现在网页中双击自动滚屏

阅读更多

  如何实现在网页中双击自动滚屏
解决思路
在文档区域双击时设置一个定时器,每隔一段时间让窗口向下移动一段距离。在文档区域单击时取消定时器。
具体步骤
代码示例:

方法一:判断滚动至页面最底端时停止滚动

<script>
var timer 
//设置每10毫秒执行一次 scrollit 的函数
function init(){timer=setInterval("scrollit()",10)} 
function stop(){clearInterval(timer)}//清除计时器,使窗口停止滚动
function scrollit(){        //使窗口滚动的函数
  scrollBy(0,1)             //将窗口滚动在 Y 轴方向上滚动1个偏移量
    //窗口自动停止滚动的条件
if(document.body.scrollTop==document.body.scrollHeight) 
     stop()

document.onmousedown=stop         //在文档区域点击时触发 stop 函数
document.ondblclick=init       //在文档区域双击时触发 init 函数
//为了测试效果而加的代码,使页面出现纵向滚动
document.write(new Array(100).join("<br>"))   
</script>

注意:判断滚动是否至页面底端的条件忽略了滚动滑块的高度。

方法二:不考虑自动停止滚动。

<script>
var timer
//在文档区域双击时触发函数,使窗口每10毫秒在 Y 轴方向上滚动1个偏移量
document.ondblclick=function(){timer=setInterval("scrollBy(0,1)",10)} 
//在文档区域点击时触发函数,取消定时器
document.onmousedown=function(){clearInterval(timer)}    
//为了测试效果而加的代码,使页面出现纵向滚动
document.write(new Array(120).join("<br>"))   
</script>

特别提示
代码运行后,在文档区域双击,页面将自动向下滚动,在文档区域单击时滚动停止。

特别说明


本例重点在于捕获双击事件 ondblclick 和页面的滚动偏移量 scrollBy。
1. ondblclick 当用户双击对象时触发。
2. scrollBy(x,y) 将窗口滚动 x 和 y 偏移量。

分享到:
评论

相关推荐

    双击自动滚屏

    标题“双击自动滚屏”指的是一个功能,它允许用户在使用某些软件或应用程序时,通过双击鼠标来实现屏幕内容的自动滚动。这个功能常见于文本编辑器、代码阅读器或者网页浏览器等,旨在提高用户的浏览效率。下面将详细...

    实现双击自动滚屏的JS代码

    ### 实现双击自动滚屏的JS代码 在网页开发中,通过JavaScript(简称JS)实现用户交互功能是非常常见的需求之一。本篇文章将详细介绍如何利用简单的JavaScript代码来实现双击后页面自动滚动的功能。 #### 一、理解...

    Html 双击自动滚屏代码

    通过上述分析可以看出,这个简单的JavaScript脚本实现了一个有趣的功能——双击自动滚屏。虽然其实现原理并不复杂,但对于提高网站的互动性和用户体验具有一定的意义。开发者可以根据具体的应用场景进行调整和优化,...

    双击页面自动滚屏效果.rar

    本项目"双击页面自动滚屏效果.rar"就是利用JavaScript实现的一个网页功能,允许用户通过双击页面来实现页面内容的自动滚动。这种效果能够提升用户体验,尤其是对于长篇内容的浏览时,用户不再需要手动滚动,只需轻轻...

    js实现页面自动滚屏效果

    在本主题中,我们将探讨如何使用JavaScript实现页面的自动滚屏效果,并且能够根据用户的单击、双击事件进行控制,以及将该功能绑定到特定的HTML元素上。 一、基本原理 页面滚动效果通常涉及到改变`window`对象的`...

    双击页面自动滚屏效果特效代码

    标题中的“双击页面自动滚屏效果特效代码”是指一种网页交互设计技术,它允许用户通过双击页面的任何地方,使页面自动滚动到顶部或底部。这种效果常见于一些现代网页设计中,以提供更便捷的用户体验。下面将详细解释...

    双击鼠标自动滚动屏幕的代码.rar

    在描述中提到,双击鼠标左键会启动自动滚屏,而单击鼠标左键则会停止滚屏,这需要我们分别处理这两种事件。 对于双击事件,JavaScript提供了`dblclick`事件。我们可以为`window`对象添加一个`dblclick`事件监听器,...

    滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码

    在本文中,我们将深入探讨如何实现滚动条变色、隐藏滚动条以及双击网页自动滚屏显示的功能。 首先,滚动条变色是通过CSS样式来实现的。滚动条的各个部分,如箭头(arrow)、轨道(track)等,都有对应的CSS属性可以...

    Js实现双击鼠标自动滚动屏幕的示例代码

    在JavaScript中,实现双击鼠标自动滚动屏幕的功能是一项常见的交互设计。这个功能主要通过监听鼠标的单击(click)和双击(dblclick)事件来完成。以下是对给定示例代码的详细解释: 首先,我们需要理解代码结构。...

    双击鼠标自动滚动屏幕的特效代码

    标题“双击鼠标自动滚动屏幕的特效代码”涉及到了一个独特的用户交互功能,它允许用户通过双击鼠标左键来激活屏幕自动滚动,而单击则可以停止这个行为。这种设计旨在提供更便捷的操作方式,特别是对于长页面浏览时,...

    双击滚屏-常用推荐

    【双击滚屏】是一种常见的网页交互功能,它允许用户在网页上双击鼠标时,页面自动以一定的速度滚动到底部。这个功能在长篇幅的内容页面中特别有用,因为它为用户提供了便捷的方式来浏览整个页面,而无需手动滚动。...

    个人网页设计常用代码集合[收集].pdf

    12. 双击页面后自动滚屏,单击后停止:使用 JavaScript 语句来实现双击页面后自动滚屏的效果。 知识点:JavaScript、事件处理 该资源提供了多种网页设计常用的代码和技术,旨在帮助网页设计师和开发者快速实现各种...

    一些精美的网页特效代码.zip

    在"一些精美的网页特效代码.zip"这个压缩包中,包含了多种常见的网页特效实例,这些代码可以帮助开发者实现一系列实用且有趣的效果,如网页背景音乐、跑马灯滚动、显示当前时间日期、一键收藏网页、双击自动滚屏以及...

    做网页的一些技巧(续)

    ### 实现双击自动滚屏 在网页设计与开发中,为用户提供更加便捷的操作体验是一项重要的任务。其中,“实现双击自动滚屏”的功能能够显著提升用户体验,特别是对于那些长篇文档或者文章阅读来说尤为实用。 #### ...

    滚屏截图工具.rar

    在提供的“滚屏截图工具.rar”压缩包中,包含了一个名为“滚屏截图工具”的可执行文件,这通常是一个绿色免安装版本的软件,用户只需双击即可运行,无需进行复杂的安装步骤。这种简洁的设计使得用户能够在任何电脑上...

    电子书制作常用特效1

    这是一个增强阅读舒适度的设计,允许用户通过单击屏幕任何地方来停止当前的自动滚屏,双击则恢复滚屏。这样的设计考虑到了不同的阅读习惯,有的读者可能喜欢手动翻页,有的则偏好连续阅读。这通常需要结合JavaScript...

    div+css很好的例子与特效

    Div+CSS是Web开发中不可或缺的技术,它在创建网页布局和实现动态效果方面扮演着重要角色。本篇将围绕"div+css很好的例子与特效"这一主题,深入探讨相关知识点,并结合提供的压缩包文件中的实例进行解析。 首先,Div...

    网际畅游 MyIE 3.0 源代码

    自动滚屏:使用自动滚屏可帮助你浏览小说文章等较长的页面,滚屏适用于没有框架的网页。滚屏的速度有高中低三种,如果你觉得太快或太慢可以在ini文件中的[settings]下加入SpeedSeed = nn,nn为一数字,缺省为100。 ...

    js学习笔记

    此外,状态栏和标题栏的动态效果、双击后的自动滚屏等都是提升网站视觉效果和用户体验的技巧。 在更复杂的功能中,JS可以实现树型结构的创建、无边框效果、联动下拉框技术、文本排序、画图类(如饼图、柱状图和...

Global site tag (gtag.js) - Google Analytics