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);跟这个写法非常类似吧,那么它到底是什么意思呢?
事实上这个我们首先要知道參数的真正意义就好了。參数能够说是一个坐标。代表了以左上角为原点,该点据页面顶端的距离和最左端的距离,然后再来理解这个事件是不是就easy多了,以像素为单位。从左上角点到指定点的移动。
3,、自增。先++还是后++,先++代表先进行+1,再进行操作;后++则是先进行数据运算,然后再+1;
温故而知新,非常美..
js实现双击后网页自己主动跑-------Day55的更多相关文章
- Meta标签实现阻止移动设备(手机、Pad)的浏览器双击放大网页
一.背景 在当今这个移动设备发展越来越快,并且技术越来越成熟的时代,移动设备成了企业扩展业务不可或缺的重要领域之一,随之而来的是适应手机的网站层出不穷,在开发过程中,我们往往会遇到一个很尴尬的问题:移 ...
- JS实现双击编辑可修改
需求描述:在一段文字处双击可以进行修改,也就是双击后创建输入框,输入内容,在输入框失去焦点后将输入的内容再以文字的形式显示出来,以下是html代码: 1 <fieldset> 2 < ...
- 在Js或者cess后加版本号 防止浏览器缓存
在Js或者cess后加版本号 防止浏览器缓存 客户端浏览器会缓存css或js文件,从而减少加载次数,减少流量,提高网页的访问速度.为了使得每次修改js或者css能生效,可以通过改变版本号来使得客户端浏 ...
- C#在WinForm中使用WebKit传递js对象实现与网页交互的方法
这篇文章主要介绍了C#在WinForm中使用WebKit传递js对象实现与网页交互的方法,涉及针对WebBroswer控件及WebKit控件的相关使用技巧,需要的朋友可以参考下 本文实例讲述了C#在W ...
- 浅谈网络爬虫爬js动态加载网页(一)
由于别的项目组在做舆情的预言项目,我手头正好没有什么项目,突然心血来潮想研究一下爬虫.分析的简单原型.网上查查这方面的资料还真是多,眼睛都看花了.搜了搜对于我这种新手来说,想做一个简单的爬虫程序,所以 ...
- Eclipse中js文件修改后浏览器不能及时更新的解决办法
项目中js文件修改后浏览器不能及时更新的解决办法 转载:http://www.codeweblog.com/%E9%A1%B9%E7%9B%AE%E4%B8%ADjs%E6%96%87%E4%BB%B ...
- 为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件
为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件.样式文件命名格式如:forms[_屏幕宽度].css,样式文件中只需重新定义文本框和下拉框的宽度即可. 在包含的头文件 ...
- [JS]jQuery,javascript获得网页的高度和宽度
[JS]jQuery,javascript获得网页的高度和宽度网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeigh ...
- 实现DevExpress GridControl 只有鼠标双击后才进行修改数据
1. 实现DevExpress GridControl 只有鼠标双击后才进行修改数据:修改GridView.OptionsBehavior.EditorShowMode属性为Click 2. 实现De ...
随机推荐
- HDU4960Another OCD Patient(间隙dp,后座DP)
Another OCD Patient Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Ot ...
- Arduino 数码管LED驱动 数组法
上个样例讲到驱动LED数码管,採用一种最直接的方案,对每一个LED进行高低电平的控制,这种长处是每一个LED都是受控可检的,避免了因为短路造成的假象,但对于数字变化来说,写起来就很冗余,因此这次尝试用 ...
- gradle(转)
一.声明dependency 在build.gradle文件编辑以下代码: apply plugin: 'java' repositories { mavenCentral() } depen ...
- network: Android 网络推断(wifi、3G与其它)
public class NetworkProber { /** * 网络是否可用 * * @param activity * @return */ public static bool ...
- ORACLE触发特定的解释
ORACLE PL/SQL编程八: 把触发器说透 本篇主要内容例如以下: 8.1 触发器类型 8.1.1 DML触发器 8.1.2 替代触发器 8.1.3 系统触发器 8.2 创建触发器 8.2.1 ...
- js右侧悬浮框
示例:屏幕右侧悬浮框 原理:oDiv.style.top = document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop ...
- TinyXml高速入口(一)
笔者:朱金灿 来源:http://blog.csdn.net/clever101 对于xml文件,眼下我的工作仅仅是集中在配置文件和作为简单的信息文件来用.因此我不太喜欢使用msxml这样的重量级的x ...
- org.apache.jasper.JasperException: An exception occurred processing JSP page /admin/jiaoshi/daochuEx
org.apache.jasper.JasperException: An exception occurred processing JSP page /admin/jiaoshi/daochuEx ...
- eclipse git 一个错误:the current branch is not configured for pull No value for key branch.xxx.merge found
eclipse git 一个错误:the current branch is not configured for pull No value for key branch.xxx.merge fou ...
- ios崩溃日志1
Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'Could not loa ...