弹性运动:顾名思义,就如同物理中的加速减速运动,当开始时速度过大,到达终点时,速度不会立刻停下,而是再前进一段距离,而后再向相反方向运动,如此往复。

var timer=null;
var speed=0;
//速度必须放在外面,放在里面的话,每次速度都是从0开始而不是保持上次执行的结果
function move(){
timer=setInterval(function(){
/*if (oDiv.offsetLeft<300) {
speed+=(300-oDiv.offsetLeft)/50;
//除以50是因为速度太大
}else{
speed-=(oDiv.offsetLeft-300)/50;}
//此处if,else里的两句执行语句化简过后是相同的
//都是speed=speed+300/50-oDiv.offsetLeft/50
//所以if,else语句可以省略掉*/
speed=speed+300/50-oDiv.offsetLeft/50; oDiv.style.left=oDiv.offsetLeft+speed+'px';
},30);
}

弹性运动往往和摩擦运动结合使用,效果更佳,摩擦运动,即速度越来越小,经计算,比较人性化,合乎常规视觉的摩擦和弹性运动公式:

speed+=(target-obj.offsetLeft)/5;
speed*=0.7;

弹性运动会出现有如下几个问题:

1)无法到达指定位置-----小数误差问题
2)如何解决?速度无法取整,使用变态方法----将要改变的值设置成变量

弹性菜单;
1)弹性运动过界问题:原因是当元素值过小时,会过界,速度会出现负值,可将速度为负时,将速度再设置

为0,但也不能从根本上解决问题。所以要慎用弹性运动
15,在使用弹性运动时,有时会出现运动过节的问题,因此有时要尽量避免使用弹性运动而是用缓冲运动

    var left=0;
var speed=0;//速度必须放外面,否则就不是每次的执行结果了
  function move(obj,target){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
speed+=(target-obj.offsetLeft)/5;
    speed*=0.7;
/*obj.style.left=obj.offsetLeft+speed+'px';
//这种写法有误差,某一个li处会多或少一块,所以改成自定义变量left,如下面*/
left+=speed;
//为了提高效率,避免浪费资源,要关闭定时器
if (Math.abs(speed)<1 && Math.abs(left-target)<1) {
//判断条件就是距离足够近,速度足够小,利用绝对值
clearInterval(obj.timer);
obj.style.left=target+'px';
//以防万一,使定时器关闭时就卡在对应位置
}else{
obj.style.left=left+'px'; }
document.title=obj.offsetLeft+' | '+target+' | '+speed;  //用于测试
},30);

JS学习之路,之弹性运动框架的更多相关文章

  1. 【温故知新】——BABYLON.js学习之路·前辈经验(二)

    前言:在上一篇随笔BABYLON.js学习之路·前辈经验(一)中回顾了组内同事们长时间在Babylon开发实践中的总结出的学习之路和经验,这一篇主要对开发中常见的一些功能点做一个梳理,这里只作为温故知 ...

  2. JS学习之路,菜鸟总结的注意事项及错误更正

    JavaScript 是一种面向对象的动态语言,它的语法来源于 Java 和 C,所以这两种语言的许多语法特性同样适 用于 JavaScript.需要注意的一个主要区别是 JavaScript 不支持 ...

  3. [js高手之路]面向对象版本匀速运动框架

    这篇文章的效果,需要看过以下3篇文章: [js插件开发教程]一步步开发一个可以定制配置的隔行变色小插件 [js高手之路]匀速运动与实例实战(侧边栏,淡入淡出) [js高手之路]打造通用的匀速运动框架 ...

  4. JS学习之路

    前言 接触js也有四五年的时间了,对js的认识也逐渐加深,想把自己这几年学习js的经历记录一下. 总则-都是对象,都是引用 在接触js前用的比较多的是java,在刚开始接触js的时候,老实讲,我是有点 ...

  5. node.js学习之路

    (非原创) 目录 Nodejs的介绍 15个Nodejs应用场景 Nodejs学习路线图 1. Nodejs的介绍 Node.js的是建立在Chrome的JavaScript的运行时,可方便地构建快速 ...

  6. react.js学习之路一

    今天新老大来了,我们要学习他使用的框架react.js,现在是两眼一抹黑,对于我这个前端菜鸟来说,是真正的重新开始,好了,不说那么多了,开始随便记录我的学习,之后再整理内容. (1)对于react来说 ...

  7. 【温故知新】——BABYLON.js学习之路·前辈经验(一)

    前言:公司用BABYLON作为主要的前端引擎,同事们在长时间的项目实践中摸索到有关BABYLON的学习路径和问题解决方法,这里只作为温故知新. 一.快速学习BABYLON 1. 阅读Babylon[基 ...

  8. JS学习之路(这个觉得写的很好,放在这里是方便查看)

    总则-都是对象,都是引用 在接触js前用的比较多的是java,在刚开始接触js的时候,老实讲,我是有点崩溃的,相信许多像我一样从后端语言向js转的童鞋们肯定有一样的感受,这玩意儿太灵活了,好像怎么样都 ...

  9. react.js学习之路二

    看react.js对我来说真的不是难不难的问题,问题是我的思路太难转变了,真是坑死我了,react里面的坑也很多.算了,这些抱怨没啥用,记录一下今天学习的内容. 今天看了to-do-list经典示例 ...

随机推荐

  1. DOM学习笔记--入门1

    HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准. 首先节点有很多种,不仅仅HTML元素是节点,尤其 要注意文本节点的存在. 根据 W3C 的 HTML DOM 标准,HTML ...

  2. 初遇locust

    大概有四个月没有用过PYTHON的我. 今天差点都不知道怎么运行了. 说起来真是丢人呐. 幸好还是存留着一点点印象,再加上看了一下以前写的几篇文章, 还是比较快的想起来了.不然真的是要崩溃了. 刚开始 ...

  3. 移动app安全测试

    安全方面逐渐转向app安全,服务端app安全测试基本上跟常规的web方面挖掘差不多,只是增加了一个反编译或抓包的过程. 参考文献: http://drops.wooyun.org/tips/749 h ...

  4. java中equals方法和contentEquals方法区别

    java中,String类里提供了两种字符串的比较方式(算上“==”应该是三种) String line1 = new String("0123456789"); String l ...

  5. 关于 div随网页居中问题

    可以先在外部设置个 宽高 小于浏览器的 div 内容再根据 最外层 定位 这个代码是 左右居中的 <div style=" width:300px; height:300px; mar ...

  6. vim 撤销 恢复 快捷键

    u   撤销上一步的操作 Ctrl+r 恢复上一步被撤销的操作

  7. HDU 1079 Calendar Game 博弈

    题目大意:从1900年1月1日 - 2001年11月4日间选择一天为起点,两个人依次进行两种操作中的任意一种,当某人操作后为2001年11月4日时,该人获胜.问先手是否获胜 操作1:向后移一天 操作2 ...

  8. 使用Interface创建的装饰者实现了必需的方法

    很多开发团队也越来越认识到,自动化测试和持续部署可帮助开发团队提高迭代效率和质量.必须要有一份拿的出手的技术.社会不比在学校,上课随便听听,通过考试就行了,实在不行还有补考.在公司里,不是这样的. 正 ...

  9. JAVA中String(字符串)课堂总结

    一:Java编译器中关于字符串自动优化 例子一: 源代码: public class StringPool { public static void main(String args[]) { Str ...

  10. OvS: data structure analysis

    hmap usage: in include/openvswitch/shash.h, we have: at first glance, it is a hmap encapsulated in s ...