一、缓冲运动

　　实现原理：(目标距离-当前距离) / 基数 = 速度(运动距离越大速度越小，运动距离和速度成反比)　　(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. HDU 3032 Nim or not Nim? （sg函数求解）

    Nim or not Nim? Problem Description Nim is a two-player mathematic game of strategy in which players ...

  2. 浏览器兼容——DOM事件封装函数

    //封装函数var eventUtil={    //添加事件    addHandler:function(element,type,handler){        if(element.addE ...

  3. asp.neti 加密三种方式

    public string Get_MD5_Method1(string strSource) { System.Security.Cryptography.MD5 md5 = new System. ...

  4. SharePoint需要开启的网站集功能

    1. 管理网站功能 2. 网站集功能

  5. java中常见的单例模式详解

    很多求职者在面试过程中都被问到了单例模式,最常见的问题,比如,每种单例模式的区别是什么?哪些模式是线程安全的?你们项目里用的哪种单例模式?原来没有注意这个问题,回来赶紧打开项目查看了一下代码,才发现我 ...

  6. POJ 1458 Common Subsequence（LCS最长公共子序列）

    POJ 1458 Common Subsequence(LCS最长公共子序列)解题报告 题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?c ...

  7. atexit模块解析

    atexit模块很简单,只定义了一个register函数用于注册程序退出时的回调函数,我们可以在回调函数中做一些资源清理的操作. 注意回调函数只有正常退出的时候才会调用,如果程序是被信号杀死或者因为严 ...

  8. seajs + easyui [转]

    * *content seajs+easyui使用 */ /** * 首先来看看在seajs中jquery和jquery插件如何使用 */ 1.jquery.js define(function(re ...

  9. jQuery 动态元素添加

    有这么一道题 <!DOCTYPE html> <head> <title>前端工程师面试题</title> <meta http-equiv=&q ...

  10. Hadoop_Lucene

    http://codelife.me/blog/2012/11/03/jackson-polymorphic-deserialization/ http://itindex.net/blog/2012 ...