一、弹性运动

　　运动原理：加速运动+减速运动+摩擦运动；

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1{ width:100px; height:100px; background:red; position:absolute; left:0; top:50px;}
</style>
<script>
window.onload = function()
{
    var oBtn = document.getElementById('btn1');
    var oDiv = document.getElementById('div1');

    oBtn.onclick = function()
    {
        startMove(oDiv, 300);
    };
};

var iSpeed = 0;
var left = 0;

function startMove(obj, iTarget)
{
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        iSpeed += (iTarget - obj.offsetLeft)/5;
        iSpeed *= 0.7;

        left += iSpeed;

        if(Math.abs(iSpeed)<1 && Math.abs(left-iTarget)<1){
            clearInterval(obj.timer);
            obj.style.left = iTarget + 'px';
        }else{
            obj.style.left = obj.offsetLeft + iSpeed + 'px';
        }        

    }, 30);
}
</script>
</head>

<body>
<input id="btn1" type="button" value="运动" />
<div id="div1"></div>
<div style="width:1px; height:300px; background:black; position:absolute; top:0; left:300px; "></div>
</body>
</html>

javascript每日一练（十四）——弹性运动的更多相关文章

  1. javascript每日一练（九）——运动一：匀速运动

    一.js的运动 匀速运动 清除定时器 开启定时器 运动是否完成:a.运动完成,清除定时器:b.运动未完成继续 匀速运动停止条件:距离足够近  Math.abs(当然距离-目标距离) < 最小运动 ...

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

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

  3. javascript每日一练（四）——DOM二

    一.DOM的创建,插入,删除 createElement(标签名) appendChild(节点) insertBefore(节点,原有节点) removeChild(节点) <!doctype ...

  4. 经典算法题每日演练——第十四题 Prim算法

    原文:经典算法题每日演练--第十四题 Prim算法 图论在数据结构中是非常有趣而复杂的,作为web码农的我,在实际开发中一直没有找到它的使用场景,不像树那样的频繁使用,不过还是准备 仔细的把图论全部过 ...

  5. javascript每日一练—运动

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

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

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

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

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

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

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

  9. javascript基础学习（十四）

    javascript之表单对象 学习要点: 表单对象 文本框 按钮 单选框和复选框 一.表单对象 在HTML文档中可能会出现多个表单,也就是说,一个HTML文档中可能出现多个<form>标 ...

随机推荐

  1. C++设计模式实现--组合(Composite)模式

    一. 举例 这个样例是书上的,如果有一个公司的组结结构例如以下: 它的结构非常像一棵树,当中人力资源部和財务部是没有子结点的,详细公司才有子结点. 并且最关健的是,它的每一层结构非常相似. 代码实现例 ...

  2. ExtJs 4 的filefield上传后 返回值success接受不正常

    问题解决了,我修改了返回类型为setContentType("text/html")可以正确解析了,感到很奇怪,其他的地方使用setContentType("applic ...

  3. Ext JS学习第十六天 事件机制event（一）

    此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件,相信你一定不陌生, 基本事件是什么?就类似于click.keypress.focus. ...

  4. atexit模块解析

    atexit模块很简单,只定义了一个register函数用于注册程序退出时的回调函数,我们可以在回调函数中做一些资源清理的操作. 注意回调函数只有正常退出的时候才会调用,如果程序是被信号杀死或者因为严 ...

  5. sorl6.0+jetty+mysql

    sorl6.0+jetty+mysql搭建solr服务 1.下载solr 官网:http://lucene.apache.org/solr/ v2.目录结构如下 v3.启动solr(默认使用jetty ...

  6. java.lang.Math类，方法学习笔记

    /**java.lang 包中的Math 类提供有常量 * 并包含有用于执行基本数学运算的 * 方法,如初等指数.对数.平方根 * 用于进行更高级的数学运算.由于 * 在Math 类的方法都是静态的, ...

  7. 通过加索引对sql语句优化

    今天看数据库的时候遇到这样一个SQL语句: select substr(a.djxh,) as id, (a.nd || a.yf) DECL_YM, a.zspm_dm as LEVY_ITEM_I ...

  8. 费用流&网络流模版

    费用流模版: #include<cstdio> #include<cstring> #include<queue> using namespace std; ;// ...

  9. 详解Spring

    Spring SSH框架中Struts2:是基于Web层,Hibernate:是基于持久化的,Spring:业务层,管理bean,它是一个容器,List,map, Set这里的内容,是适合已经学过了S ...

  10. JNI_Java Native Interface

    一.简介 Java Native Interface(JNI),java与c/c++交互的接口,下面是一个简单是示例. javah 可以生成native方法对应的头文件,javap 可以查看方法或者属 ...