一、弹性运动

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

<!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. 概率图模型（PGM）学习笔记（四）-贝叶斯网络-伯努利贝叶斯-多项式贝叶斯

    之前忘记强调了一个重要差别:条件概率链式法则和贝叶斯网络链式法则的差别 条件概率链式法则 贝叶斯网络链式法则,如图1 图1 乍一看非常easy认为贝叶斯网络链式法则不就是大家曾经学的链式法则么,事实上 ...

  2. poj 2411 Mondriaan's Dream 轮廓线dp

    题目链接: http://poj.org/problem?id=2411 题目意思: 给一个n*m的矩形区域,将1*2和2*1的小矩形填满方格,问一共有多少种填法. 解题思路: 用轮廓线可以过. 对每 ...

  3. win7 64位下如何安装配置mysql-5.7.4-m14-winx64

    win7 64位下如何安装配置mysql-5.7.4-m14-winx641. mysql-5.7.4-m14-winx64.zip下载 官方网站下载地址:http://dev.mysql.com/g ...

  4. Ubuntu 15.04 设置thin1.6.4作为Rails4.2.5的默认服务器

    0. gem install thin //安装1.6.4 1. 进入到Raisl项目的根目录. 2. 在Gemfile中加入一行 gem 'thin' 3. 运行 bundle install 4. ...

  5. [Linux命令]查看Linux系统相关命令

    #查看系统内核/操作系统/CPU信息 uname -a #返回:内核名 主机名 Linux内核版本 内核编译日期 操作系统版本 CPU型号 硬件平台 GNU/Linux#查看系统是32位还是64位un ...

  6. YIi配置debug工具、yii配置gii工具

    $config['bootstrap'][] = 'debug';$config['modules']['debug'] = [ 'class'=>'yii\debug\Module', 'al ...

  7. js基本框架

  8. WebRTC–getUserMedia & Canvas

    下面是一个使用getUserMedia接口和Canvas的drawImage方法实现的截图功能(截取视频中的一帧). 基本思路是这样子的: getUserMedia获取一个MediaStream, s ...

  9. 通过原生js的ajax或jquery的ajax获取服务器的时间

    在实际的业务逻辑中,经常是与时间相关的,而前端能获得的时间有两个:客户端的时间,服务器的时间. 客户端时间通过 javascript中的Date对象可以获取,如 var dt = new Date() ...

  10. Linux下Qt应用程序的发布（使用LDD命令查看所有依赖的库文件）

    最近一直在学习Qt,用Qt写了一个程序,但是不知道怎么发布,网上说的都是在windows下怎么发布Qt应用程序,但是,在windows下Qt应用程序依赖的库文件与linux下的名字不同.于是,我就想到 ...