一、缓冲运动

　　实现原理：(目标距离-当前距离) / 基数 = 速度(运动距离越大速度越小，运动距离和速度成反比)　　(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. [Leetcode]-containsNearbyDuplicate

    //题目: //给定一个整数数组与一个整数k,当且存在两个不同的下标i和j满足nums[i] = nums[j]而且| i - j | <= k时返回true.否则返回false. #inclu ...

  2. ecshop标签大全 各个页面常用标签大全

    先从index.php主页开始 页面关键字 {$keywords } 页面标题 {$page_title} 产品分类 父分类列表 {foreach from=$categories item=cat ...

  3. ThinkPHP - 登录模块，核心代码

    /** * 登录成功 * @return [type] [description] */ public function checkLogin($data) { $user = M($this-> ...

  4. 学习：WordXML格式初步分析

    Office2003以上,Word可以以XML文本格式存储,这样就可以使用外部程序创建Word文件,而不需要使用Word的对象.也能够自由的打开分析Word文件,或者发布到自己的Web页面,或者其他更 ...

  5. LeetCode 二叉树的最小深度

    计算二叉树的最小深度.最小深度定义为从root到叶子节点的最小路径. public class Solution { public int run(TreeNode root) { if(root = ...

  6. 写一个背景渐变的TextView输入框

    1:在res文件夹下新建一个drawble文件夹,并新建一个背景文件如writebg.xml <?xml version="1.0" encoding="utf-8 ...

  7. gcc代码反汇编查看内存分布[1]: gcc

    # gcc -vgcc version 4.4.5 (Ubuntu/Linaro 4.4.4-14ubuntu5) 重点: 代码中的内存分配, 地址从低到高: 代码段(RO, 保存函数代码) --&g ...

  8. Vmware虚拟机网络模式及虚拟机与物理机通信方法

    [转]http://www.cqeis.com/news_detail/newsId=1477.html Vmware虚拟机软件是一个“虚拟PC”软件,它使你可以在一台机器上同时运行二个或更多Wind ...

  9. SQL——表结构或数据的复制

    一.复制表结构及数据到新表 create table new_tb select * from old_tb 二.只复制表结构到新表 create table new_tb select * from ...

  10. 亲测VS2010纯静态编译QT4.8.0，实现VS2010编译调试Qt程序，QtCreator静态发布程序（图文并茂，非常详细）

    下载源代码,注意一定是源码压缩包如qt-everywhere-opensource-src-4.8.0.zip,不是Qt发布的已编译的不同版本的标准库如qt-win-opensource-4.8.0- ...