<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        #div1{

            width: 200px;

            height: 200px;

            background: red;

            position: absolute;

            top:50px;

            left: 0px;

        }

    </style>

    <script>

        function startMove(){

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

            setInterval(function(){

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

                },30)

        }

    </script>

</head>

<body>

<input id="btn1" type="button" value="开始运动" onclick="startMove()">

    <div id="div1" ></div>

</input>

</body>

</html>

设置停顿位置和移动速度

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        #div1{

            width: 200px;

            height: 200px;

            background: red;

            position: absolute;

            top:50px;

            left: 0px;

        }

    </style>

    <script>

        //开启定时器

        var timer=null;

        function startMove(){

            var speed=3;

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

            timer=setInterval(function(){

                if(oDiv.offsetLeft>=300){//停顿位置

                    clearInterval(timer);

                }

                    oDiv.style.left=oDiv.offsetLeft+speed+'px';//speed是物体运动速度快慢

                },30);

        }

    </script>

</head>

<body>

<input id="btn1" type="button" value="开始运动" onclick="startMove()">

    <div id="div1" ></div>

</input>

</body>

</html>

JS运动基础的更多相关文章

  1. 第八节 JS运动基础

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

  2. 学习blus老师js(6)--js运动基础

    运动基础 一.匀速运动 运动框架 在开始运动时,关闭已有定时器 把运动和停止隔开(if/else) <!DOCTYPE HTML> <html> <head> &l ...

  3. JS运动基础(一)

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  4. js运动基础2（运动的封装）

    简单运动的封装 先从最简单的封装开始,慢慢的使其更丰富,更实用. 还是上一篇博文的代码,在此不作细说. 需求:点击按钮,让元素匀速运动. <!DOCTYPE html> <html ...

  5. JS运动基础(四) 碰撞运动

    碰撞运动撞到目标点,速度反转无重力的漂浮Div速度反转滚动条闪烁的问题过界后直接拉回来 加入重力反转速度的同时,减小速度纵向碰撞,横向速度也减小横向速度小数问题(负数) <!DOCTYPE HT ...

  6. JS运动基础(三) 弹性运动

    加减速运动速度不断增加或减少速度减小到负值,会向反方向运动 弹性运动在目标点左边,加速:在目标点右边,减速根据距离,计算加速度 带摩擦力的弹性运动弹性运动+摩擦力 弹性:速度 += (目标点 - 当前 ...

  7. JS运动基础(二) 摩擦运动、缓冲运动

    摩擦运动: 逐渐变慢,最后停止 缓冲运动: 与摩擦力的区别:可以精确的停到指定目标点距离越远速度越大速度由距离决定速度=(目标值-当前值)/缩放系数Bug:速度取整值取整: iSpeed = iSpe ...

  8. Javascript 运动基础 01

    JS运动基础  运动基础   让Div运动起来 速度——物体运动的快慢 运动中的Bug 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快   匀速运动 速度不变 <s ...

  9. JS学习-基础运动

    多物体运动 多个物体用同一个函数时,函数里定义的定时器应该要每个物体对应一个定时器名称,不然会导致未完成运动就被关闭了,因为定时器名称一样,而开启定时器前会清除一下. obj.timer 多值同时运动 ...

随机推荐

  1. 常用邮箱的服务器(SMTP/POP3)地址和端口总结

    163.com: POP3服务器地址:pop.163.com(端口:110) SMTP服务器地址:smtp.163.com(端口:25) 126邮箱: POP3服务器地址:pop.126.com(端口 ...

  2. mvn命令备忘

    转换成eclipse项目mvn eclipse:eclipse 跳过testmvn install -Dmaven.test.skip=true mvn clean install -DskipTes ...

  3. Mysql之复制服务

    Replication[复制]使得数据可以从一个Master服务器上复制到一个或多个Slave上,默认是异步复制,不需要与Master建立永久连接:基于配置,可以作用于所有库,指定的库或库中的某些表. ...

  4. Swift - @IBDesignable和@IBInspectable

    前言: 用storyboard/xib搞项目时,一些属性在Interface Builder上时无法设置,比如常用的layer的一些属性cornerRadius,borderColor等 (有时没必须 ...

  5. UVA 111 History Grading

    读题读了好久,其实就是在输入数据时要对数据的位置进行相应的改变 #include<iostream> #include<cstring> #include<cstdio& ...

  6. 数据结构之图 Part3 – 1 遍历

    DFS using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace ...

  7. PowerDesigner连接Oracle数据库生成数据模型【本地连接方式】

    步骤1:选择数据库     步骤2:选择要连接的数据库的版本   步骤3:新建数据库连接   步骤4:提供3种连接数据库方式(在此选择第3种),并且点击配置按钮,进行下一步   步骤5:点击此按钮,填 ...

  8. 将数据导出成excel表

    /// <summary> /// 生成excel表 /// </summary> /// <param name="dt">数据表</p ...

  9. WebRTC音视频引擎研究(1)--整体架构分析

    WebRTC技术交流群:234795279 原文地址:http://blog.csdn.net/temotemo/article/details/7530504     1.WebRTC目的     ...

  10. Win7下用IIS发布网站

    安装IIS控制面板->程序->程序和功能, 点击左侧的“打开或关闭Windows功能”把这几项都勾上吧,虽然有些不是必须的,多勾无碍. 进入IIS管理器控制面板-> 系统和安全-&g ...