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

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. 一步步优化JVM六:优化吞吐量

    如果你已经进行完了前面的步骤了,那么你应该知道这是最后一步了.在这一步里面,你需要测试应用的吞吐量和为了更高的吞吐量而优化JVM.    这一步的输入就是应用的吞吐量性能要求.应用的吞吐量是在应用层面 ...

  2. 最简单的jdbc操作

    Connection con = null; Statement stmt = null; // 保存到表中 String sql = "insert into website(userna ...

  3. svn自动备份并上传到ftp

    .建立bat文件 simpleBackup.bat,文件内容如下 @echo 正在备份版本库%1......@%SVN_HOME%bin\svnadmin hotcopy %1 %BACKUP_DIR ...

  4. CodeForces 681D Gifts by the List

    $dfs$,后续遍历. 如果某个节点$a[i]=i$,那么$i$的后继的$a[i]$都要指向$i$,直到出现新的后继$j$,$a[j]=j$.利用这个可以判断是否有解. 如果有解的话,那么只要输出后序 ...

  5. redis整合spring

    最近公司项目有用到     所以找了一下实例.感觉很清晰.    完整项目路径http://www.cnblogs.com/dennisit/p/3614521.html看了一下应该没问题

  6. 如何在MyEclipse中配置jre的编译运行环境

    由于在MyEclipse中已经自带了jre编译环境,但由于版本太低,所以有时候需要将编译环境配置为系统的jre版本.在MyEclipse中配置jre的编译运行环境很简单,只需要全局配置一次,则所有项目 ...

  7. Gulp安装使用教程

    题记:为什么要使用gulp,网上有很多关于gulp的优势,而在我看来,这些都是工具的优势!工具的优势最主要体现在易用性上,听说gulp比grunt更易用,所以这里写个文档记录. 同样要保证nodejs ...

  8. HttpGet和HttpPost的区别

    HttpGet和HttpPost的区别总结就是下面这样: Get一般用于从服务器取数据,而且不改变原来的内容: Post一般用于向服务器传递数据,这需要改变服务器的内容. 从安全性上考虑,Get的安全 ...

  9. Style绑定

    目的 style绑定可以添加或者移除DOM元素的样式值.这非常有用,例如,当值为负数时将颜色变为红色. (注:如果要修改CSS整个类,请使用css绑定) <div data-bind=" ...

  10. php浏览历史记录的方法

    本文实例讲述了php浏览历史记录的方法.分享给大家供大家参考.具体实现方法如下: /** * 商品历史浏览记录 * $data 商品记录信息 */private function _history($ ...