一、缓冲运动

　　实现原理：(目标距离-当前距离) / 基数 = 速度(运动距离越大速度越小，运动距离和速度成反比)　　(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. mac下的搭建本地discuz论坛

    本地是php+mysql+apache的环境.也可以用xampp一键安装的东西,那个貌似比较省事.因为我的本地php环境已经装好了,就直接下了discuz的代码安装. 打开web共享 将discuz代 ...

  2. 具体解释coredump

    一,什么是coredump 我们常常听到大家说到程序core掉了,须要定位解决,这里说的大部分是指相应程序因为各种异常或者bug导致在执行过程中异常退出或者中止,而且在满足一定条件下(这里为什么说须要 ...

  3. asp.NET配置

    添加用户 1.选择创建用户   2 可以使用网站管理工具来管理应用程序的所有安全设置.可以设置用户和密码(身份验证),可以创建角色(用户组),还可以创建权限(用于控制对应用程序各个部分的访问的规则). ...

  4. 把Web Form项目转换成MVC项目

    http://umbraco.com/follow-us/blog-archive/2013/7/14/moving-from-webforms-to-mvc.aspx https://codinga ...

  5. vim: 字符串替换

    :s/str1/str2/ 替换当前行第一个 str1 为 str2:s/str1/str2/g 替换当前行所有 str1 为 str2 ( 注意,  s/xx/xxx/g 语句从s开始,中间的空格视 ...

  6. 用SQL实现统计报表中的"小计"与"合计"的方法详解

    本篇文章是对使用SQL实现统计报表中的"小计"与"合计"的方法进行了详细的分析介绍,需要的朋友参考下   客户提出需求,针对某一列分组加上小计,合计汇总.网上找 ...

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

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

  8. Error Unable to start the Genymotion virtual device.解决

    The Genymotion virtual device could not obtain an IP address.For an unknown reason.VirtualBox DHCP h ...

  9. BZOJ 1609: [Usaco2008 Feb]Eating Together麻烦的聚餐

    1609: [Usaco2008 Feb]Eating Together麻烦的聚餐 Description 为了避免餐厅过分拥挤,FJ要求奶牛们分3批就餐.每天晚饭前,奶牛们都会在餐厅前排队入内,按F ...

  10. poj 1035 Spell checker(hash)

    题目链接:http://poj.org/problem?id=1035 思路分析: 1.使用哈希表存储字典 2.对待查找的word在字典中查找,查找成功输出查找成功信息 3.若查找不成功,对word增 ...