<!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. 升级CUDA版本导致VS2010错误：未找到导入的项目XXX，请确认<Import>声明中的路径正确，且磁盘上存在该文件

    转自:http://www.cnblogs.com/yeahgis/p/3853420.html VS2010错误:未找到导入的项目XXX,请确认<Import>声明中的路径正确,且磁盘上 ...

  2. 有关Java的优秀博客集锦

    1. 在java编程中,多线程并发总有些疑惑:如为什么会产生并发?并发会有什么影响?java中提供了哪些处理并发的技术(机制) 关于并发产生的原因,我查了一些资料目前发现有两种原因:一,存在共享的资源 ...

  3. web.config详解 -- asp.net夜话之十一

    1.配置文件节点说明    1.1 <appSettings>节点    1.2 <connectionStrings>节点    1.3 <compilation> ...

  4. 一般处理程序获取session值

    1.要在一般处理程序中获取其他页面的session值,需要引用名空间: using System.Web.SessionState; 2.然后继承一个接口:IRequiresSessionState, ...

  5. tomcat7源码编译过程以及问题解决

    http://blog.csdn.net/kaoshangqinghua/article/details/40022315

  6. 【翻译八】java-内存一致性错误

    Memory Consistency Errors Memory consistency errors occur when different threads have inconsistent v ...

  7. 【PHP Cookie&&Session】

    大部分的人都知道Cookie,但是可能不了解Session,现在对这两者进行解释. 问题的提出: 有些网站会提示用户在一定的时间之内免登陆,这是用的什么技术?答案是Cookie技术. 有些购物网站会提 ...

  8. ASP.NET多线程下使用HttpContext.Current为null解决方案 2015-01-22 15:23 349人阅读 评论(0) 收藏

    问题一:多线程下获取文件绝对路径 当我们使用HttpContext.Current.Server.MapPath(strPath)获取绝对路径时HttpContext.Current为null,解决办 ...

  9. git checkout 命令详解

    转自:http://www.cnblogs.com/hutaoer/archive/2013/05/07/git_checkout.html?utm_source=tuicool&utm_me ...

  10. (转载)Bash 中的特殊字符大全

    转自:https://linux.cn/article-5657-1.html Linux下无论如何都是要用到shell命令的,在Shell的实际使用中,有编程经验的很容易上手,但稍微有难度的是she ...