一、运动框架

1.在开始运动时,关闭已有定时器(否则会不断有新的定时器执行)

2.把运动和停止隔开(if/else)

二、缓冲运动

逐渐变慢,最后停止(距离越远速度越大)

速度=(目标值-当前值)/缩放系数

例如 var iSpeed=(iTarget-oDiv.offsetLeft)/8;

但由于除法可能产生小数,位置加上一个小数还是会被舍弃(如300.25px其实还是会被计算机当成300px),所以小数要给它向上取整,当然也有可能是负的小数,那就要向下取整

iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);

潜在问题:目标值有时候也是计算出来可能是小数,也要给它取整parseInt(iTarget)

三、匀速运动的停止条件

距离足够近

if(Math.abs(oDiv.offsetLeft-iTarget)<iSpeed){           //不管往左还是往右,取绝对值

oDiv.style.left=iTarget+'px';

}

[Js]缓冲运动的更多相关文章

  1. JS缓冲运动案例:右侧居中悬浮窗

    JS缓冲运动案例:右侧居中悬浮窗 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta cha ...

  2. JS缓冲运动案例:右下角悬浮窗

    JS缓冲运动案例:右下角悬浮窗 红色区块模拟页面的右下角浮窗,在页面进行滚动时,浮窗做缓冲运动,最终在页面右下角停留. <!DOCTYPE html> <html lang=&quo ...

  3. js缓冲运动

    缓冲运动 现象:逐渐变慢,最后停止 原理:距离越远,速度越大 速度的计算方式: 1,速度由距离决定 2,速度=(目标值-当前值)/缩放系数 说明:速度为正负数时,也决定了物体移动的方向 示例:div缓 ...

  4. JS缓冲运动案例

    点击"向右"按钮,红色的#red区块开始向右缓冲运动,抵达到黑色竖线位置自动停止,再次点击"向右"#red区块也不会再运动.点击"向左"按钮 ...

  5. JS 缓冲运动 带运动的留言本 小案例

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  6. js 运动函数篇 (一) (匀速运动、缓冲运动、多物体运动、多物体不同值运动、多物体多值运动)层层深入

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写 匀速运动.缓冲运动.多物体运 ...

  7. js实现缓冲运动,和匀速运动有点不相同

    缓冲运动和匀速运动有点不同,看图可以知道缓冲运动速度是越来越慢的. <style> *{ padding:0; margin:10px 0; } #div1{ height:100px; ...

  8. js动画之缓冲运动

    缓冲运动就是运动的速度与时间或者距离有关联,不是一般的匀速运动 <!DOCTYPE html> <html lang="en"> <head> ...

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

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

随机推荐

  1. SAP 关于标准成本、计划成本、目标成本、实际成本

    SAP 关于标准成本.计划成本.目标成本.实际成本 <A style="MARGIN-RIGHT: 10px" target=_blank data-ext="{v ...

  2. HDU1542矩形面积并

    取出纵向边按x坐标排序,在y方向上建立线段树. 每次查询当前有效长度len,ans += len*(x[i]-x[i-1]); 其中len为T[rt].len; 查询完毕后更新y方向上线段树,入边+1 ...

  3. SG 复习全部 (全部SG 总览)

    1. SQL 基础 进入查缺补漏阶段 2. PL/SQL 进入 practice 阶段 3. Fundamental 1 这部分还是比较重要 architecture 数据库启动与关闭步骤 insta ...

  4. ScriptX.cab打印控件的使用,控件文件里有

    1.在head里添加 <object id="factory" style="display:none;" viewastext classid=&quo ...

  5. Java数组实现五子棋功能

    package ch4; import java.io.*; /** * Created by Jiqing on 2016/11/9. */ public class Gobang { // 定义棋 ...

  6. (八)C语言结构体和指针

    指针也可以指向一个结构体变量.定义的一般形式为: struct 结构体名 *变量名; 前面已经定义了一个结构体 stu: struct stu { char *name; int num; char ...

  7. git 命令行操作

    Git是一款免费.开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目 这里说一下在命令行对git进行操作 git init [在本地初始化一个git库] //当你的git服务器里面已经有文 ...

  8. Selected SVN connector library is not available or cannot be loaded

    1.错误描述 The following data will be sent: ------ STATUS ------ pluginId            org.eclipse.team.sv ...

  9. 【MYSQL】在脚本中使用变量-执行脚本时传参

    在shell脚本里可以定义变量,并在执行脚本时任意传参. #!/bin/bashdb_name=$1 #将第一个值赋给db_name变量sql_name=$2 #将第二个值赋给sql_name变量my ...

  10. IDE显示无法打开源文件时解决方案

      解决方法:加上具体地址信息将 #include <qwidgetresizehandler_p.h> 改为 #include <C:\Users\INnoVation\Deskt ...