<!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. LeetCode : 93. Restore IP Addresses

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABZ4AAAHUCAYAAAC6Zj2HAAAMFGlDQ1BJQ0MgUHJvZmlsZQAASImVlw

  2. IT人学习方法论（二）：学习误区

    之前我们讨论了“学什么”的问题,今天我们来谈一谈“怎么学”的问题.磨刀不误砍柴工,我们要提高学习效率,首先需要找到自己学习方法上的误区. 一些常见的学习方法误区 1)资料导向型 现在就停止阅读这篇文章 ...

  3. tar 打包文件　除某个文件夹

    tar -cvf test2.tar --exclude=test/test10 test/

  4. 那些年，我们在Django web开发中踩过的坑（一）——神奇的‘/’与ajax+iframe上传

    一.上传图片并在前端展示 为了避免前端整体刷新,我们采用ajax+iframe(兼容所有浏览器)上传,这样用户上传之后就可以立即看到图片: 上传前: 上传后: 前端部分html: <form s ...

  5. sdut 2449走迷宫【最简单的dfs应用】

    走迷宫 Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_ 题目描述 一个由n * m 个格子组成的迷宫,起点是(1, 1), 终点是(n, m) ...

  6. 攻城狮在路上（叁）Linux（十二）--- Linux的目录与路径

    一.相对路径与绝对路径: A.绝对路径:由根目录/开始写起的路径,例如 /usr/share/doc B.相对路径:不是由根目录/开始写起的路径. 二.目录的相关操作: 1.cd: 目录切换 cd ~ ...

  7. NBU bplabel命令擦除磁帶數據

    bplabel Linux系統,該命令位於NBU server的如下目錄:/usr/openv/netbackup/bin/admincmd bplabel – write NetBackup lab ...

  8. Go 中的反射要点

    简介 反射是元数据编程的一种形式,指的是程序获得本身结构的一种能力.不同语言的反射模型实现不一样,本文中的反射,仅仅指的是Go语言中的反射模型. 类型以及接口 这个基本概念需要清晰,这里不详细展开. ...

  9. Oracle Segments可以跨多个data files吗？

    首先,你需要明白的一点是:数据库的物理结构是由数据库的操作系统文件所决定,每一个Oracle数据库是由三种类型的文件组成:数据文件.日志文件和控制文件.数据库的文件为数据库信息提供真正的物理存储.每一 ...

  10. hdu 5437 优先队列+模拟 **

    比赛的时候虽然考虑到没门的情况,但是写了几组都能过,就没想了,23333,差一行代码就能A,遗憾~~ #include<cstdio> #include<iostream> # ...