<!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. [Android Pro] proguard

    -optimizationpasses 5 # 指定代码的压缩级别 -dontusemixedcaseclassnames # 是否使用大小写混合 -dontskipnonpubliclibraryc ...

  2. mongochef如何链接有权限的mongodb3.x数据库

    废话不多说,直接上图: 1.打开mongochef 2.打开的界面是这样的: 3.点击connect,上图红色框中的按钮,不要点下拉三角 4.点击New Connection按钮 5.1:上图标注1, ...

  3. 3ds max不显示网格，转换为可编辑面片

    按G就消失了,快捷键 F3/F4切换线框和面片模式的显示

  4. Redis 数据持久化（一）

    Redis的模块化开发设计的还是相当不错的,在Bio.h和Bio.c文件中定义了一个多线程的文件任务处理模块,在添加和处理任务的时候使用互斥锁和条件变量进行的同步,而且本身也支持多线程,这个模块的支持 ...

  5. 查询局域网内在线电脑IP

    COLOR 0A CLS @ECHO Off Title 查询局域网内在线电脑IP :send @ECHO off&setlocal enabledelayedexpansion ECHO 正 ...

  6. IE8支持HTML5的占位符placeholder

    /*IE8支持placeholder占位符*/ if( !('placeholder' in document.createElement('input')) ){ $('input[placehol ...

  7. securecrt 用心跳保持连接

    选项->会话->终端->发送协议NO-OP(P)

  8. Easy UI 面板

    驾考园 http://www.jiakaoyuan.com 驾考园信息网 下载(源码)

  9. win10下安装Ubuntu + 修复Ubuntu引导

    如何在已安装 Windows 10 的情况下安装 Linux(Ubuntu 15.04)双系统? - Microsoft Windows - 知乎http://www.zhihu.com/questi ...

  10. JavaScript是如何实现继承的(六种方式)

    大多OO语言都支持两种继承方式: 接口继承和实现继承 ,而ECMAScript中无法实现接口继承,ECMAScript只支持实现继承,而且其实现继承主要是依靠原型链来实现,下文给大家技术js实现继承的 ...