一、js的运动

　　匀速运动

  1. 清除定时器
  2. 开启定时器
  3. 运动是否完成：a、运动完成，清除定时器；b、运动未完成继续

　　匀速运动停止条件：距离足够近  Math.abs(当然距离-目标距离) < 最小运动距离

div的匀速运动（简单运动）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1{ width:100px; height:100px; background:red; position:absolute; top:50px; left:500px;}
span{ width:1px; height:300px; background:black; position:absolute; left:300px; top:0; display:block;}

</style>
<script>
window.onload = function()
{
    var oBtn = document.getElementById('btn1');
    var oDiv = document.getElementById('div1');

    oBtn.onclick = function()
    {
        startMove(oDiv, 300);
    };
};
var timer = null;
function startMove(obj, iTarget)
{
    clearInterval(timer);
    timer = setInterval(function(){
        var iSpeed = 0;

        if(obj.offsetLeft < iTarget)
        {
            iSpeed = 7;
        }
        else
        {
            iSpeed = -7;
        }

        if( Math.abs( obj.offsetLeft - iTarget ) < 7 )
        {
            clearInterval(timer);
            obj.style.left = iTarget + 'px';
        }
        else
        {
            obj.style.left = obj.offsetLeft + iSpeed + 'px';
        }
    }, 30);
}
</script>
</head>

<body>
<button id="btn1">移动</button>
<div id="div1"></div>
<span></span>
</body>
</html>

javascript每日一练（九）——运动一：匀速运动的更多相关文章

  1. javascript每日一练—运动

    1.弹性运动 运动原理:加速运动+减速运动+摩擦运动: <!doctype html> <html> <head> <meta charset="u ...

  2. javascript每日一练（十四）——弹性运动

    一.弹性运动 运动原理:加速运动+减速运动+摩擦运动: <!doctype html> <html> <head> <meta charset="u ...

  3. javascript每日一练（十二）——运动框架

    运动框架 可以实现多物体任意值运动 例子: <!doctype html> <html> <head> <meta charset="utf-8&q ...

  4. javascript每日一练（十一）——多物体运动

    一.多物体运动 需要注意:每个运动物体的定时器作为物体的属性独立出来互不影响,属性与运动对象绑定,不能公用: 例子1: <!doctype html> <html> <h ...

  5. javascript每日一练（十）——运动二：缓冲运动

    一.缓冲运动 实现原理:(目标距离-当前距离) / 基数 = 速度(运动距离越大速度越小,运动距离和速度成反比) (500 - oDiv.offsetLeft) / 7 = iSpeed; 需要注意: ...

  6. javascript每日一练（十三）——运动实例

    一.图片放大缩小 <!doctype html> <html> <head> <meta charset="utf-8"> < ...

  7. javascript每日一练（一）——javascript基础

    一.javascript的组成 ECMAScript DOM BOM 二.变量类型 常见类型有:number, string, boolean, undefined, object, function ...

  8. javascript每日一练（八）——事件三：默认行为

    一.阻止默认行为 return false; 自定义右键菜单 <!doctype html> <html> <head> <meta charset=&quo ...

  9. javascript每日一练（七）——事件二：键盘事件

    一.键盘事件 onkeydown触发, keyCode键盘编码 ctrlKey altKey shiftKey 键盘控制div移动 <!doctype html> <html> ...

随机推荐

  1. Linux下启用Chrome/Firefox的Java插件

    JDK 已经安装好,可是浏览器执行 Java Applet 时提示需安装 Java 插件. 这时,在浏览器安装文件夹中 plugins 文件夹下创建2个重要的符号链接就可以. libnpjp2.so ...

  2. SRM 585

    250 : 递推,从左下角到右下角走一条,剩下的都是子结构 const int mod = 1000000007; long long dp[1000010] , s[1000010]; class ...

  3. 五毛的cocos2d-x学习笔记05-场景与场景动画，动作

    场景切换函数: Director->getInstance()->replaceScene(Scene*); Director->getInstance()->runWithS ...

  4. Jquery调用webService的四种方法 转载-记录

    我总结几个关键点 1. 服务必须声明为ScriptService(否则会出现下面的问题) 2.服务的方法不需要任何更改,保持原状 3.客户端用jquery的.ajax方法来调用 3.1 type必须是 ...

  5. 设计模式值六大原则——依赖倒置原则 （DIP）

    依赖倒置原则(Dependence Inversion Principle,DIP)的原始定义: 高层模块不应该依赖底层模块,两者都应该依赖其抽象: 抽象不应该依赖细节: 细节应该依赖抽象. 依赖倒置 ...

  6. CBV进阶(一)

    http_method_names , http_method_not_allowd 用途:views只接受这些请求. 范围View Default:['get', 'post', 'put', 'p ...

  7. html一些东东

    在IE浏览器中,当input获得焦点时,点击有unselectable="on"属性的标签时,不会触发onblur事件 在 IE11 下,浏览器自作多情在 text input 组 ...

  8. Agile methodology

    ntroduction Waterfall model follows application development in phases with checkpoint and deliverabl ...

  9. JRebel 6 破解版及使用方法

    最近更新到jrebel6.2.1了,我自己做了个技术分享的微信公众号(茶爸爸),有心的朋友可以来这里一起学习 云盘下载链接: http://pan.baidu.com/s/1bnGzMUF 配置: - ...

  10. Linux基本配置和管理 1---- Linux网络基本配置

    1 IP编址 1 IP编址是一个双层的编址方案,一个IP编址标识一个主机(或一个网卡接口) 2 现在应用最为广泛的是ipv4,已经开始逐步香ipv6切换 3 ipv4地址为32位,ipv6为128位 ...