<!DOCTYPE html>

 <html lang="en">

     <head>

         <meta charset="UTF-8">

         <title>Document</title>

         <style>

             #div1{width:100px; height: 100px; background-color: red; position: absolute; left: 0px; top: 100px}

         </style>

         <script>

             /*

                 实现动画

                 人眼能够识别的最小间隔 18帧  1秒18张图片

                 运动中的问题

                 1、不会停

                 2、速度在取某些值的时候不会停

                 3、到达目的值以后，点击还会往前运动

                     需要通过if...else将运动和停止分开

                 4、重复点击，启动多个定时器，速度越来越快

                     保证，在统一时间只能有一个定时器启动。

                     每次启动定时器之前，先将上一次的定时器关闭。

                 运动框架总结:

                     1、运动和停止分开

                         if...else

                     2、每次启动定时器之前，先将上一次定时器关闭。

             */

             window.onload = function(){

                 var oDiv = document.getElementById("div1");

                 var timer = null;

                 document.onclick = function(){

                     var speed = 7;

                     clearInterval(timer);

                     timer = setInterval(function(){

                         if(oDiv.offsetLeft >= 500){

                             clearInterval(timer);

                         }else{

                             oDiv.style.left = oDiv.offsetLeft + speed + 'px';

                         }

                     }, 30);

                 }

             }

         </script>

     </head>

     <body>

         <div id = 'div1'></div>

     </body>

 </html>

浏览器效果：

认识js运动的更多相关文章

  1. 带无缝滚动的轮播图（含JS运动框架）

    今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框 ...

  2. js运动框架之一条乱跑的虫子

    克隆与运动框架的联合应用 效果:点击元素块后,元素块开始随机的向任何方向移动,并附带一堆颜色随机的"尾巴".每个方向运动3秒后改变方向,同时笑脸变哭脸. 如图所示: 朝某个方向运动 ...

  3. JS运动从入门到兴奋1

    hello,我是沐晴,一个充满了才华,却靠了照骗走江湖的前端妹子.在这个充满PS的年代,这你们都信,哈哈,废话不多说,今天要分享的是关注JS运动的知识.楼主一直认为,不管学习什么,核心思想才是王道,掌 ...

  4. 关于js运动的一些总结

    js运动实现,有两种.一种是速度版,另一种是时间版. 速度版是通过对速度的加减乘除,得出元素的运动数据.时间版是通过对时间进行Tween公式运算,得出元素的运动数据. 速度版运动优点:容易在运动过程中 ...

  5. JS运动学习笔记 -- 任意值的运动框架（高/宽度，背景颜色，文本内容，透明度等）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. js运动动画

    原文:js运动动画 今天简单的学了一下js运动动画,再此感谢慕课网的这位老师http://www.imooc.com/view/167,讲的很不错. 下面是我整理出来的结果. 知识点一:速度动画. 1 ...

  7. 第八节 JS运动基础

    运动基础 让Div运动起来 速度——物体运动的快慢 运动中的Bug 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快 匀速运动(速度不变) 运动框架及应用: 运动框架: 在 ...

  8. JS运动 - 无缝滚动和缓动动画

    JS运动 - 无缝滚动和缓动动画 无缝滚动原理:首先先复制两张图片(第一张和第二张)放到最后面;ul绝对定位,如果ul的left值大于等于4张图片的宽度,就应该快速复原为0. html <!DO ...

  9. 解析JS运动

    解析JS运动 物体运动原理:通过改变物体的位置,而发生移动变化. 任何运动都是相对的,就像物理中的运动公式:s(要达到的)=s0(当前的样式值)+vt. 方法:      1.运动的物体使用绝对定位 ...

  10. move.js运动插件

    move.js 运动插件是一款针对元素动画效果的插件.可以运用此插件制作出各类元素效果. 插件GitHub地址:https://github.com/visionmedia/move.js 下面整理学 ...

随机推荐

  1. JavaSE学习总结（二）——Java语言基础

    一.Java程序预览 Java的语法与C非常类似,这里先使用几个非常简单的程序以点带面来区分C语Java的区分再细讲每个知识点.该文仅针对有编程基础的朋友参考. 1.1.Hello World 创建j ...

  2. 在同一个类中，一个方法调用另外一个有注解（比如@Async，@Transational）的方法，注解失效的原因和解决方法

    参考原贴地址:https://blog.csdn.net/clementad/article/details/47339519 在同一个类中,一个方法调用另外一个有注解(比如@Async,@Trans ...

  3. javascript 实现手风琴特效

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 【JUC】JDK1.8源码分析之ReentrantReadWriteLock

    重入锁ReentrantLock是排他锁,排他锁在同一时刻仅有一个线程可以进行访问,但是在大多数场景下,大部分时间都是提供读服务,而写服务占有的时间较少.然而读服务不存在数据竞争问题,如果一个线程在读 ...

  5. Codeforces Round #470 (rated, Div. 2, based on VK Cup 2018 Round 1) C.Producing Snow

    题目链接  题意  每天有体积为Vi的一堆雪,所有存在的雪每天都会融化Ti体积,求出每天具体融化的雪的体积数. 分析 对于第i天的雪堆,不妨假设其从一开始就存在,那么它的初始体积就为V[i]+T[1. ...

  6. Linux命令（十）打包压缩、软件安装

  7. Composer 安装和使用

    1.linux下安装 curl -sS https://getcomposer.org/installer | php mv composer.phar /usr/local/bin/composer ...

  8. IPv4套接字地址结构

    一.IPv4套接字地址结构(POSIX定义) (1)长度字段sin_len是为增加对OSI协议的支持而随4.3BSD-Reno添加的:并不是所有的厂家都支持套接字地址结构的长度字段,而且POSIX规范 ...

  9. Jetson tx2的tensorflow keras环境搭建

    其实我一直都在想,搞算法的不仅仅是服务,我们更是要在一个平台上去实现服务,因此,在工业领域,板子是很重要的,它承载着无限的机遇和挑战,当然,我并不是特别懂一些底层的东西,但是这篇博客希望可以帮助有需要 ...

  10. HDU4685 Prince and Princess【强连通】

    题意: 有n个王子和m个公主,每个王子都会喜欢若干个公主,也就是王子只跟自己喜欢的公主结婚,公主就比较悲惨, 跟谁结婚都行.然后输出王子可能的结婚对象,必须保证王子与任意这些对象中的一个结婚,都不会影 ...