JS定时器是函数

setInterval(函数体/函数名  , 时间)

清楚定时器

clearInterval(函数)

时间单位(毫秒)

1000毫秒  = 1秒

  首先我们要知道用JS定时器能干什么?定时器的原理是什么?

  我的理解为,定时器是能让一个物体根据规定的时间做规定的移动,而物体运动是怎样的效果呢?你可以理解为一个人走路,要走到某个位置,要走到这个位置肯定是一步步移动才能达到,而不是瞬间就到达的,所以定时器的作用更像是让物体像人一样走到相应的位置

比如:

  规定一个横形状方块,其中包裹一个小方块,然后将大方块定位到屏幕之外,再通过某个事件触发使大方块出现:

before:

now:

  可以看到红色部分是负值,所以我们要动过物体移动,来使红色部分一点点移动出来,

获取到div1

设置定时器

给其鼠标放置其上和离开时时的事件

封装move函数

一 一讲解,

在启动定时器之前,我们要先清除一次定时器,为的是放置多重触发时使速度越来越快

然后设置移动速度   speed

 因为你事件是置上和离开事件,传递的参数为0和-600;所以我们要判断

当距离(target)每次减去offsetLeft大于0时,就向上取整,小于0时候向下取整,

然后设置什么时候关闭定时器的条件

在这里是,当我们鼠标置上时或者离开时候达到我们给定的target参数我们就清除定时器,否则我们就每30毫秒执行一次定时器,使得红色部分一点点显现出来,在这里要注意的是,这样做出来的运动是在越接近我们给定的值时速度就会降下来,因为定时器是未达到关闭条件时,他会每执行一次就判断当前值离设定值还有多少距离,距离越小,移动的距离就越小,所以我们看起来就会有种减速的感觉。

简单吧!

定时器能做的不止这些,还有更多小案例,例如物体的多重移动,你可以理解为一种思想,代码是活的

说到这里,还有一种办法可以轻松实现这种效果,就是css3的过渡,配合hover属性可以轻松实现,

例如:

为触发hover之前给定负值,触发hover时候,恢复正常值,最后给div一个   ,就可以轻松实现以上效果啦

JS定时器做物体运动的更多相关文章

  1. js多个物体运动问题2

    问题1 http://www.cnblogs.com/huaci/p/3854216.html 在上一讲问题1,我们可以整理出2点: 1,定时器作为运动物体的属性 2,startMove方法,参数要传 ...

  2. js多个物体运动的问题1

    问题2 http://www.cnblogs.com/huaci/p/3854304.html 用js写一个物体的运动很简单.如果一个页面有多个物体在运动,它会不会出问题呢? ok,我们来看一个示例 ...

  3. js动画---多物体运动

    对于多物体运动和单个物体运动来说,没有特别大的区别,实现原理基本上是一样的,都是通过定时器来实现的,但是多物体有一些地方需要注意,具体哪些需要注意,我将在下面的程序中说明. 首先,我们需要建立几个li ...

  4. js实现多物体运动框架并兼容各浏览器

    首先,我们须要知道在js中获取对象的宽度如offsetWidth等.可能会存在一些小小的bug.原因之中的一个在于offsetWidth只不过获取盒子模型中内容的部分宽度.并不包括内边距,边框和外边距 ...

  5. js 运动函数篇 (一) (匀速运动、缓冲运动、多物体运动、多物体不同值运动、多物体多值运动)层层深入

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写 匀速运动.缓冲运动.多物体运 ...

  6. js动画之多物体运动

    多个物体这不能使用一个定时器了,要给每个物体一个定时器 <!DOCTYPE html> <html lang="en"> <head> < ...

  7. [js]多个物体的运动

    与单个的区别:得知道哪个在动,所以运动函数需要两个参数,出了目标iTarget之外,还要obj.另外需要多个计数器,否则当一个还没运动完就移入另一个物体会发生卡壳 window.onload=func ...

  8. JavaScript 运动(缓冲运动,多物体运动 ,多物体多值运动+回调机制)

    匀速运动   (当需要物体做匀速运动直接调用statMove函数) function startMove(dom,targetPosetion){ //dom : 运动对象,targetPositio ...

  9. 【unity3d游戏开发脚本笔记之一:坐标系选择对物体运动的影响】

    时间:2016年9月24日17:38:21   作者:yexiaopeng 博客园     在unity3d的世界中,其坐标系可分为四种,世界坐标系-WorldSpace   本地坐标系-LocalS ...

随机推荐

  1. osg编译日志

    1>------ 已启动全部重新生成: 项目: ZERO_CHECK, 配置: Debug x64 ------1> Checking Build System1> CMake do ...

  2. k8s记录-下载k8s相关二进制包(一)

    1)软件清单操作系统:CentOS7Kubernetes版本:v1.14.2flannel:v0.10.0ectd3:v3.3.11Docker版本:v18.09.0-ceDocker-compose ...

  3. auto和decltype的用法总结

    一, auto 1, auto的作用     一般来说, 在把一个表达式或者函数的返回值赋给一个对象的时候, 我们必须要知道这个表达式的返回类型, 但是有的时候我们很难或者无法知道这个表达式或者函数的 ...

  4. 转 检查rac服务时,发现ons服务offline

    检查rac服务时,发现ons服务offline 时间:2014-12-23 11:17:37  作者:solgle  来源:www.solgle.com  查看:4075  评论:0         ...

  5. Python数据处理pdf (中文版带书签)、原书代码、数据集

    Python数据处理 前言 xiii第1 章 Python 简介 11.1 为什么选择Python 41.2 开始使用Python 41.2.1 Python 版本选择 51.2.2 安装Python ...

  6. Top 10 Machine Learning Algorithms For Beginners

    Linear Regression Logistic regression KNN Classification Support Vector Machine (SVM) Decision Trees ...

  7. 【Leetcode_easy】867. Transpose Matrix

    problem 867. Transpose Matrix solution: class Solution { public: vector<vector<int>> tra ...

  8. socket编程(二)

    TCP下粘包问题 两种情况下会发生粘包. 1.发送端需要等缓冲区满才发送出去,造成粘包(发送数据时间间隔很短,数据了很小,会合到一起,产生粘包) 发送方:AB #其实放在缓存里没发送 发送方:B #其 ...

  9. python基础篇(三)

    PYTHON基础篇(三) 装饰器 A:初识装饰器 B:装饰器的原则 C:装饰器语法糖 D:装饰带参数函数的装饰器 E:装饰器的固定模式 装饰器的进阶 A:装饰器的wraps方法 B:带参数的装饰器 C ...

  10. 通过调用Windows本地RPC服务器bypass UAC

    备战一个月比赛,导致近期都没啥时间更新博客,正好今天看到一篇通过调用本地RPC服务的文章,觉得非常有意思,就拿来充充博客. 在1.0版本的APPINFO.DLL中的RPC服务调用接口ID为:201ef ...