<!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. ios安装cocoaPods

    1. 安装 a. 查看源 i.   gem sources -l b. 删除源 i.   sudo gem sources -r https://rubygems.org/ c. 设置源 i.   s ...

  2. visio 到处流程图

    文件 -> 另存为 (选 .jpg) 选自定义,然后 300 * 300 像素.

  3. Linux Window Redis安装

    Linux 下简易的安装过程: 1.源码安装之前要先安装gcc,不然编译会出错, 2.下载源码,去http://download.redis.io/releases/这个文件夹内找想安装的版本,我下载 ...

  4. nohup命令

    nohup就是不挂起的意思( n ohang up). .nohup command 或者 nohup command & 这之间的差别是带&的命令行,即使terminal(终端)关闭 ...

  5. iOS应用支持IPV6，就那点事儿

    原文连接   果然是苹果打个哈欠,iOS行业内就得起一次风暴呀.自从5月初Apple明文规定所有开发者在6月1号以后提交新版本需要支持IPV6-Only的网络,大家便开始热火朝天的研究如何支持IPV6 ...

  6. jq 确定删除方法与文件删除

    var choice=confirm("您确认要删除吗?", function() { }, null);                if(choice)           ...

  7. C#的反射机制

    using System; using System.Collections; using System.Collections.Generic; using System.IO; using Sys ...

  8. 13.代理模式(Proxy Pattern)

    using System; namespace Test { //抽象角色:声明真实对象和代理对象的共同接口. //代理角色:代理对象角色内部含有对真实对象的引用,从而可以操作真实对象, //同时代理 ...

  9. maven File encoding has not been set

    原pom.xml配置文件: <?xml version="1.0" encoding="UTF-8"?> <project xmlns=&qu ...

  10. select * from salgrade for update和select * from salgrade for update nowait区别

    1,select * from salgrade for update session1 session2 SQL> delete salgrade where grade=1; 1 row d ...