一、运动框架

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. MyEclipse中文乱码解决方法

    在Myeclipse导入一个项目,有中文乱码问题,解决方法如下: 一.将整个project设置编码UTF-8(UTF-8可以最大的支持国际化) windows->Preferences-> ...

  2. 关于tomcat8在windows2008下高并发下问题的解决方案

    因为客户服务器特殊的环境问题,只能使用windows2008r2服务器,然而配置过后,网站的高访问量很快就出现了各种问题,以下是解决的问题汇总. 服务器环境:windows2008R2+jdk8.0+ ...

  3. 禁止ubuntu的super快捷键

    在mac上安装了ubuntu虚拟机, 但是发现command健(ubuntu中叫super健)被系统占用了, 习惯了command健的同学来说非常不方便, 如何禁用默认的command健呢? You ...

  4. [转载] linux cgroup

    原文: http://coolshell.cn/articles/17049.html 感谢左耳朵耗子的精彩文章. 前面,我们介绍了Linux Namespace,但是Namespace解决的问题主要 ...

  5. 学习笔记day6:position index结合

    z-index属性适用于定位元素(position 属性值为 relative 或 absolute 或 fixed的对象),用来确定定位元素在垂直于显示屏方向(称为Z轴)上的层叠顺序(stack o ...

  6. 机器学习如何选择模型 & 机器学习与数据挖掘区别 & 深度学习科普

    今天看到这篇文章里面提到如何选择模型,觉得非常好,单独写在这里. 更多的机器学习实战可以看这篇文章:http://www.cnblogs.com/charlesblc/p/6159187.html 另 ...

  7. Ubuntu系统下面软件安装更新命令

    在ubuntu服务器下安装包的时候,经常会用到sudo apt-get install 包名 或 sudo pip install 包名,那么两者有什么区别呢? 1.区别 pip用来安装来自PyPI( ...

  8. Mybatis 的分页插件PageHelper-4.1.1的使用

    Mybatis 的分页插件 PageHelper 项目地址:http://git.oschina.net/free/Mybatis_PageHelper  文档地址:http://git.oschin ...

  9. hibernate的离线关联(多级)查询

    如果实体对象中没有关联对象的情况使用DetachedCriteria进行查询是一件很简单的事情. 假设要通过stuName查询一个学生Student记录,可以如下: Java代码 DetachedCr ...

  10. 货币金额的计算 - Java中的BigDecimal

    在<Effective Java>这本书中也提到这个原则,float和double只能用来做科学计算或者是工程计算,在商业计算中我们要用 java.math.BigDecimal.,而且使 ...