一、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. csv批量导入mysql命令

    今天把从Kaggle上下载下来的csv数据导入mysql,想做个统计分析,怎奈csv文件有些大.所以仅仅能用mysql 命令导入,现mark下,以备以后不时之需: 1. 导入: 基本的语法: load ...

  2. Silverlight CheckBoxList

    项目要用到复选框,可是在Silverlight中不存在CheckBoxList.通过查阅资料以及依据自己的理解,写了简单演示样例: 1.XAML <UserControl x:Class=&qu ...

  3. ActionScript3游戏中的图像编程（连载十七）

    总文件夹:http://blog.csdn.net/iloveas2014/article/details/38304477 1.3.3 HSB与RGB之间的互转公式及HSL和HSV对色彩属性理解的异 ...

  4. git从github下载代码

    Github作为远程仓库的使用详解  http://blog.csdn.net/djl4104804/article/details/50778717 centos local:        通过g ...

  5. JavaSE学习总结第01天_Java概述

      01.01 计算机概述 计算机(Computer):全称电子计算机,俗称电脑. 是一种能够按照程序运行,自动.高速处理海量数据的现代化智能电子设备. 由硬件和软件所组成,没有安装任何软件的计算机称 ...

  6. MongoDB Linux下的安装和启动(转)

    1. 下载MongoDB,此处下载的版本是:mongodb-linux-i686-1.8.1.tgz.tar. http://fastdl.mongodb.org/linux/mongodb-linu ...

  7. python 字典有序无序及查找效率，hash表

    刚学python的时候认为字典是无序,通过多次插入,如di = {}, 多次di['testkey']='testvalue' 这样测试来证明无序的.后来接触到了字典查找效率这个东西,查了一下,原来字 ...

  8. poj 2187 Beauty Contest 最远点距

    /** 求出凸包枚举每个点的矩距离即可 因为凸包上的点可定不多.. 学习: 刚开始WA 了一次,,因为用int 存的, 一看discuss 里提供的数据,想起来,,应该是越界了.. 后来用longlo ...

  9. 深入浅出—JAVA(8)

    8.接口与抽象类 不是抽象的类就被称为具体类 不同继承树的类也可以实现相同的接口,类可以实现多个接口.

  10. BZOJ 1018

    program bzoj1018; type node=..] of boolean; pair=..] of boolean; var tot,c,i,j,k,x1,y1,x2,y2:longint ...