四、简单动画之缓冲运动

实现速度的缓冲,即不同位置的速度不同,越靠近目标值速度越小,所以速度值与目标值与当前值之差成正比。这里要注意一个问题就是物体在运动中速度是连续变化的,不是按照整数变化的,当物体停止时由于小数的原因,位置可能不会回到原起点,会差一点,所以缓冲运动里变化的速度要取整。

 //鼠标移到元素上元素右移,鼠标离开元素回去。
var timer="";
function Move(locat) {//移动终点位置
var ob=document.getElementById('box1');
clearInterval(timer);
timer=setInterval(function () {
var speed=(locat-ob.offsetLeft)/10;//speed的大小和移动距离成正比,分母控制缓冲的快慢,即比例系数K,可调整
speed=speed>0?Math.ceil(speed):Math.floor(speed);//凡是缓冲运动速度一定要取整!!!向右运动时坐标向上取整,向左运动时坐标向下取整
if (ob.offsetLeft==locat) {//当前位置到达指定终点,关闭定时器
clearInterval(timer);
} else {
ob.style.left=ob.offsetLeft+speed+'px';
}
}, 30)
}

在下面的HTML文档里调用上面的JS函数。还用上次的那个div为例:

 <style type="text/css">
*{
margin:;
padding:;
} #box1{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
left:;
} </style>
 <div id="box1"></div>
<script type="text/javascript">
window.onload=function(){
var ob=document.getElementById('box1');
ob.onmouseover=function(){
Move(200);
}
ob.onmouseout=function(){
Move(0);
}
}
</script>

js动画学习(二)的更多相关文章

  1. Android动画学习(二)——Tween Animation

    前两天写过一篇Android动画学习的概述,大致的划分了下Android Animation的主要分类,没有看过的同学请移步:Android动画学习(一)——Android动画系统框架简介.今天接着来 ...

  2. 【06-23】js动画学习笔记01

    <html> <head> <style> * { margin:0; padding:0; } #div1{ width:200px; height:200px; ...

  3. js动画学习(一)

    一.运动框架实现思路 1.匀速运动(属性值匀速变化)(改变 left, right, width, height, opacity 等): 2.缓冲运动(属性值的变化速度与当前值与目标值的差成正比): ...

  4. Node.js基础学习二之POST请求

    本篇介绍下 Node.js post 请求 需求: 用户登录,前端界面输入用户名和密码,点击登录请求后台验证,根据后台反馈的信息做出响应 前端: (1)使用form表单 (2)使用ajax异步请求 服 ...

  5. js动画学习(四)

    七.多属性封装函数 前面分别介绍了单独改变单一属性值得动画,从本节起开始介绍多属性封装函数,一个函数搞定多种属性值的改变. 首先介绍一个很重要的函数getStyle(),这个函数返回一个元素的当前属性 ...

  6. js动画学习(五)

    九.多属性同时运动 前面的例子都是每个属性单独运动,如果想要多属性同时运动怎么办?比如,我想要一个div的onmouseover事件中宽和高同时变化.下面这个函数是单独变宽: window.onloa ...

  7. js动画学习笔记

    <html> <head> <meta charest="utf-8"> <title>test</title> < ...

  8. js动画学习(三)

    五.多物体变宽 这里面要注意由于物体变多了,需要给每个物体各配备一个定时器,否则如果只有一个定时器的话,当鼠标在不同物体之间快速滑动时,不同的物体就会出现争抢的现象.所以timer前要加obj. fu ...

  9. js动画(二)

    嗯,今天好冷,特别冷,我的手指,都冻的打不了字了.今天一件特别的傻的事就是,在 for(var i;i<obj.length;i++){} 找了半天没有注意到 var i 没有赋值.够150 了 ...

随机推荐

  1. 定义一个runtime的Annotation

    import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; @Retention(value ...

  2. ElaticSearch网站

    http://www.tuicool.com/articles/r2QJVr http://so.searchtech.pro/articles/2013/06/16/1371392427213.ht ...

  3. MySQL Binlog的介绍

    binlog基本定义:二进制日志,也成为二进制日志,记录对数据发生或潜在发生更改的SQL语句,并以二进制的形式保存在磁盘中: 作用:MySQL的作用类似于Oracle的归档日志,可以用来查看数据库的变 ...

  4. CCNA实验(3) -- RIP

    RIP协议分为版本1和版本2,均具备以下特征:1.是距离向量路由协议2.使用跳数(Hop Count)作为度量值3.默认路由更新周期为30秒4.管理距离(AD)为1205.支持触发更新6.最大跳数为1 ...

  5. POJ 3061 Subsequence(Two Pointers)

    [题目链接] http://poj.org/problem?id=3061 [题目大意] 给出S和一个长度为n的数列,问最短大于等于S的子区间的长度. [题解] 利用双指针获取每一个恰好大于等于S的子 ...

  6. java设计模式(二)单例模式 建造者模式

    (三)单例模式 单例模式应该是最常见的设计模式,作用是保证在JVM中,该对象仅仅有一个实例存在. 长处:1.降低某些创建比較频繁的或者比較大型的对象的系统开销. 2.省去了new操作符,减少系统内存使 ...

  7. Fastboot的使用简单教程

    大家都知道HTC手机重新启动进入所谓的project模式,就是HBOOT,然后能够进入FASTBOOT界面,在这个界面.我们能够在电脑端能够做非常多事,特别是HBOOT被改动过,假设是ENG S-OF ...

  8. Mac下搭建quick cocos2d-x编译环境

    一. 我知道在你的电脑中一定已经安装好了Xcode(没有自己下载去吧),打开Xcode,开启"偏好设置"对话框(commond + ,).假设打开之后出现的是这种一个对话框,那么直 ...

  9. 使用 system.io.filesysteminfo 来查找文件。

    如何快速搜索你想找到文件呢.大家知道Windows系统自带了搜索,很方便,下面介绍自己编写的也可以达到同样的效果.注意.有些文件的访问需要更高的权限.这里暂且去掉那些文件目录的搜索.不然会出现erro ...

  10. 关于SQL Server数据表的五中约束

    1.主键约束(PRIMARY KEY) 主键约束可以在表中定义一个主键值,它可以唯一确定表中每一条记录,每个表中只能有一个主键约束(只能有一个主键约束的意思并不是说受主键约束的列只能有一个),并且受主 ...