一、缓冲运动

　　实现原理：(目标距离-当前距离) / 基数 = 速度(运动距离越大速度越小，运动距离和速度成反比)　　(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. Java对象序列化与反序列化一 JSON

    Java对象序列化与反序列化一 JSON 1. 依赖库 jackson-all-1.6.1.jar 2. 代码 public class Student {    private String nam ...

  2. IE升级到10.0,VS2010启动调试时报“未能将脚本调试器附加到计算机..”

    IE升级到10.0,VS2010启动调试时报“未能将脚本调试器附加到计算机..” 今天,在调试代码时,调试器弹出提示框,报:未能将脚本调试器附加到计算机XXX上的进程iexplore.exe . 已附 ...

  3. Querying Microsoft SQL Server 2012 读书笔记:查询和管理XML数据 2 -使用XQuery 查询XML数据

    XQuery 是一个浏览/返回XML实例的标准语言. 它比老的只能简单处理节点的XPath表达式更丰富. 你可以同XPath一样使用.或是遍历所有节点,塑造XML实例的返回等. 作为一个查询语言, 你 ...

  4. 「OC」 基本语法

    一.OC简介 在C语言的基础上,增加了一层最小的面向对象语法:完全兼容C语言:可以在OC代码中混入C语言代码,甚至是C++代码:可以使用OC开发Mac OS X平台和iOS平台的应用程序. 二.OC语 ...

  5. 【Linux命令】Ubuntu14.04+QT5.2配置mysql

    安装qt: 官网下载qt5.2.1:qt-opensource-linux-x64-5.2.1.run 直接命令行运行:./qt-opensource-linux-x64-5.2.1.run 选择安装 ...

  6. BZOJ 3907: 网格( 组合数 + 高精度 )

    (0,0)->(n,m)方案数为C(n,n+m), 然后减去不合法的方案. 作(n,m)关于y=x+1的对称点(m-1,n+1), 则(0,0)->(m-1,n+1)的任意一条路径都对应( ...

  7. PHP自练项目中个人中心创建，修改，验证（服务器端和客户端验证）

    当注册成功到登录后进入个人中心,查看和修改自己的资料 第一步:创建个人中心: <?php //定义个常量,用来授权调用includes里面的文件 define('IN_TG',true); // ...

  8. StringIO模块字符串的缓存

    StringIO经常被用来作为字符串的缓存,应为StringIO有个好处,他的有些接口和文件操作是一致的,也就是说用同样的代码,可以同时当成文件操作或者StringIO操作.比如: import st ...

  9. JavaEE Tutorials (7) - 在会话bean中使用异步方法调用

    7.1异步方法调用88 7.1.1创建异步业务方法88 7.1.2从企业bean客户端调用异步方法897.2async示例应用90 7.2.1async—war模块的架构91 7.2.2运行async ...

  10. 数据结构——队列（Queues）

    队列的存储特性:FIFO(first in first out)即先进先出原则 单向/双向队列 *优先队列(与queue不同) 存储方式: 带尾指针的单向链表 / 数组 queue类: queue() ...