一、缓冲运动

　　实现原理：(目标距离-当前距离) / 基数 = 速度(运动距离越大速度越小，运动距离和速度成反比)　　(500 - oDiv.offsetLeft) / 7 = iSpeed;

　　需要注意：当计算出来的速度有小数时需要取整；

　　(500 - oDiv.offsetLeft) / 7 = iSpeed;  iSpeed = iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);

例子1：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>缓冲运动</title>
<style>
#div1{ width:100px; height:100px; background:red; position:absolute; top:50px; left:0;}
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 = (iTarget - obj.offsetLeft)/8;
        iSpeed = iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);

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

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

例子2：侧边栏滑动

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>侧边栏滑动</title>
<style>
#div1{ width:100px; height:100px; background:red; position:absolute; right:0; top:0;}
</style>
<script>
window.onload = window.onscroll = function()
{
    var oDiv = document.getElementById('div1');
    var iScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    var clientHeight = document.documentElement.clientHeight;
    var iH = (clientHeight - oDiv.offsetHeight)/2 + iScrollTop;

    //oDiv.style.top = iH + 'px';
    startMove(oDiv, parseInt(iH));

};
var timer = null;

function startMove(obj, iTarget)
{
    clearInterval(timer);

    timer = setInterval(function(){
        var iSpeed = (iTarget - obj.offsetTop) / 8;
        iSpeed = iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);

        if(obj.offsetTop == iTarget){
            clearInterval(timer);
        }else{
            obj.style.top = obj.offsetTop + iSpeed + 'px';
        }
    }, 30);
}
</script>
</head>

<body style="height:2000px;">
<div id="div1"></div>
</body>
</html>

javascript每日一练（十）——运动二：缓冲运动的更多相关文章

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

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

  2. javascript每日一练—运动

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

  3. JS运动基础(二) 摩擦运动、缓冲运动

    摩擦运动: 逐渐变慢,最后停止 缓冲运动: 与摩擦力的区别:可以精确的停到指定目标点距离越远速度越大速度由距离决定速度=(目标值-当前值)/缩放系数Bug:速度取整值取整: iSpeed = iSpe ...

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

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

  5. JavaScript 运动（缓冲运动，多物体运动 ,多物体多值运动+回调机制）

    匀速运动   (当需要物体做匀速运动直接调用statMove函数) function startMove(dom,targetPosetion){ //dom : 运动对象,targetPositio ...

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

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

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

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

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

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

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

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

随机推荐

  1. 初次接触VC++载入自己定义LIB 即静态链接

    分为两部分 第一部分  LIBproject 用来生成LIB文件 #ifndef _myfun #define _myfun int myfun(int x,int y) { return x+y; ...

  2. python下使用protobuf

    python解决ImportError: No module named google.protobuf 关于protocol buffer的优点,就过多涉及:如果涉及到数据传输和解析,使用pb会比自 ...

  3. IOS中的自动布局

    Autolayout是一种“自动布局”技术,专门用来布局UI界面 Autolayout能很轻松地解决屏幕适配问题 Autolayout的两条核心概念:   >1 参照:通过参照其他控件或父控件来 ...

  4. DevExpress ASP.NET 使用经验谈（8）-ASPxGridView自定义列和基本事件

    为演示本节示例,我们在原来Users表增加[性别Gender].[兴趣爱好Hobbies],[CreateTime创建时间],[ModifyTime]修改时间这4个字段, ALTER TABLE [d ...

  5. database schema

    数据中有4个Schema无法被删除 ● dbo, 具有db_owner或者db_ddl_admin 的用户,新创建对象默认schema就是dbo ● guest , 用来给guest 用户使用,这个s ...

  6. Querying Microsoft SQL Server 2012 读书笔记:查询和管理XML数据 1 -使用FOR XML返回XML结果集

    XML 介绍 <CustomersOrders> <Customer custid="1" companyname="Customer NRZBB&qu ...

  7. poj 1430 第二类斯特林数

    1 #include <iostream> #include <cmath> #include <algorithm> using namespace std; i ...

  8. django user模块改写

    示例一:继承AbstractBaseUser,AbstractBaseUser只有三个字段password,last_login,is_active,以及需要复习的两个方法 def get_full_ ...

  9. （IOS）Apple 证书相关

    1.私钥 本地钥匙串程序创建<证书请求文件>(.certSigningRequest),用其向苹果申请下载<证书文件>/<私钥>(.cer),并安装到钥匙串: 团队 ...

  10. USB接口定义

    一般的排列方式是:红白绿黑从左到右 定义: 红色-USB电源 标有-VCC.Power.5V.5VSB字样 绿色-USB数据线(正)-DATA+.USBD+.PD+.USBDT+ 白色-USB数据线( ...