js实现双击后网页自动跑-------Day55

公司的界面设计环节总算是告一段落了,必须要承认的是,这段时间晚间的学习带给我很多益处,在工作中偶尔的应用,效果出奇的好,收到领导和同事的一些小赞扬,表示很欣慰,也长了点不少自信,虽然不理解,他们这些工作好几年的人应该对这些不是应该都很了解么,为什么会表现出来有些陌生,不过不想那么多了,喜欢就好。

今天来记录下js实现双击后网页自动跑,这个在很多网站上都有所体现吧,那么该如何实现呢?

首先我们来分析下实现的基本原理:

1、获取鼠标的双击事件(这个在前面曾经记录过一次,但是很不幸的是上次貌似还写错了,这里纠正下ondblclick,在javascript中的大小写真的是要注意);

2、网页自动跑,也就是说页面滚动效果,实际上就是scrollTop不断增大,直到达到底部为止;

再用代码来实现下:

var nowPostion,timer;
document.onmousedown=stop;
document.ondblclick=windowScroll;//记得哦,是ondbclick,全部是小写
function windowScroll() {//var windowScroll=function(){} ,还记得这个写法么
 timer=setInterval("scrollwindow()",1);
}
function stop(){
 clearInterval(timer);
}
function scrollwindow() {//这是实现的关键
 nowPostion=document.body.scrollTop;//当前滚动条的上端距离
 window.scroll(0,++nowPostion);//这里是++nowPostion,不是nowPostion++哦
 if (nowPostion != document.body.scrollTop) //这就是++在前的目的
	 stop();
}

记录几个关键点:

1、双击事件,ondbclick事件,再来声明下;

2、window.scroll(1,100);跟这个写法很类似吧,那么它究竟是什么意思呢?

其实这个我们首先要知道参数的真正意义就好了,参数可以说是一个坐标,代表了以左上角为原点,该点据页面顶端的距离和最左端的距离,然后再来理解这个事件是不是就容易多了,以像素为单位,从左上角点到指定点的移动。

3,、自增,先++还是后++,先++代表先进行+1,再进行操作;后++则是先进行数据运算,然后再+1;

温故而知新,很美..

js实现双击后网页自动跑-------Day55

时间: 2024-10-13 19:30:41

js实现双击后网页自动跑-------Day55的相关文章

JS实现倒计时网页自动跳转(如404页面经常使用到的)

在web前端设计中,我们经常会遇到需要实现页面倒计时跳转的功能,例如在404页面中也会经常使用到此功能,那么如何实现呢,其实实现方法很简单,实现代码如下:<title>JS倒计时网页自动跳转代码</title> <script language="JavaScript" type="text/javascript"> function delayURL(url) { var delay = document.getElementB

JS倒计时网页自动跳转代码

<title>JS倒计时网页自动跳转代码</title> <script language="JavaScript" type="text/javascript"> function delayURL(url) { var delay = document.getElementById("time").innerHTML; if(delay > 0) { delay--; document.getElem

swipe.js触摸后不自动滚动的修改

function stop() { //修改触摸后不自动滚动的问题 2016-9-23 //delay = 0; delay = options.auto > 0 ? options.auto : 0; clearTimeout(interval); } 这个地方修改后即可

修改文件后浏览器自动刷新解决方案

现有编程工具的自动刷新解决方案 其实有很多工具可以做到文件一改变,浏览器自动刷新,其实这样体验也是最好的,可是由于一些原因,这些工具并不能解决所有工作场景的需求. 由于这不是本文的主要内容,只列出一些可以实现自动刷新的工具,没有进行详细展开,大家可以自行去研究下. 在Sublime下有一个插件叫做LiveStyle可以实现修改CSS后自动刷新,但是每一个CSS文件都要手动配置,不够智能.需要安装Chrome插件:Emmet LiveStyle. JetBrains公司的IDEA.WebStorm

盒子模型、网页自动居中、float浮动与清除、横向两列布局

1.CSS包含:标准文档流,浮动,绝对定位 标准文档流的特点:从上到下,从左到右,输出文档内容 盒子模型:块级元素(div ui li dl dt p)与行级元素(span strong img input) 盒子模型:边框(border)外边框(margin)内边框(padding)内容(content) 盒子3D模型:border. content+padding .background-img.background-color.margin <html> <head> <

jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法

转自:http://www.cnblogs.com/sunjie9606/archive/2012/09/13/2683636.html 现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout" 等 处理方法: 在html片段加载完毕后使用 Js代码 $.parser.parse(context) 即可重新渲染. 实现原理: 首先附上jquery.parser.js的源码 Js代码 (function($){ $.parser

盒子 收藏帖子 转移-实现向网页自动填写用户名密码并自动点击登录按钮 完成全自动凳录

//实现向网页自动填写用户名密码并自动点击登录按钮 完成全自动凳录 Function FillForm(WebBrowser: TWebBrowser2; FieldName: String; Value: String): Boolean; Var i, j: Integer; FormItem: Variant; Begin Result := False; //no form on document If WebBrowser.OleObject.Document.all.tags('FO

Meta标签实现阻止移动设备(手机、Pad)的浏览器双击放大网页

一.背景 在当今这个移动设备发展越来越快,并且技术越来越成熟的时代,移动设备成了企业扩展业务不可或缺的重要领域之一,随之而来的是适应手机的网站层出不穷,在开发过程中,我们往往会遇到一个很尴尬的问题:移动端网页在用户双击屏幕时会变大,导致整个页面的布局错误,非常 影响最终效果,下面介绍一种通过html的meta标签来阻止该现象发生的办法. 二.解决办法和原理 1.首先设置网页的DOCTYPE 1 <!DOCTYPE html> 2 <html> 3 .... 4 </html&

C++、VC++、MFC网页自动注册、登陆、发帖、留言,QQ注册、QQ申请器源码、注册邮箱源码、自动发帖源码

C++.VC++.MFC网页自动注册.登陆.发帖.留言,QQ注册.QQ申请器源码.注册邮箱源码.自动发帖源码 参考资料: 自动登录yahoo邮箱http://blog.csdn.net/suisuibianbian/archive/2005/12/12/550260.aspx VC采集网页所有表单域http://blog.csdn.net/fjssharpsword/archive/2010/12/17/6081689.aspx 说说这类软件最常见的使用方式吧. 也许你经常看到有人发布了以下这类