js动画之同时运动
一个物体可以同时做多个运动，而不是完成一个运动再一个运动，而是让你感觉他们是同时发生的。
直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>同时运动</title>
<style>
.animation{
background-color: green;
height: 200px;
width: 200px;
position: absolute;
opacity: 0.3;
left:0px;
filter:alpha(opacity:30);
}
</style>
</head>
<body>
<div id="test" class="animation" ></div>
</body>
<script type="text/javascript">
window.onload = function(){
var ele = document.getElementById("test"),
timer = null;
ele.onmouseover = function(){
startAnimation(ele,{left:100,opacity:100},function(){
}); } function startAnimation(node,json,fn){
//1.清空定时器
clearInterval(timer);
//2.重新生成一个定时器
timer = setInterval(function(){
//定义一个指标，所有的属性没有到达目标则不能清除定时器
var success = false;
for(attr in json){
var target = json[attr];
var _currentAttrValue = null;
if(attr == 'opacity'){
_currentAttrValue = Math.round(parseFloat(getStyle(node,attr))*100);
}else{
_currentAttrValue = parseInt(getStyle(node,attr));
} if(_currentAttrValue == target){
break;
}else{
success = false;
if(_currentAttrValue > target){
_currentAttrValue --;
}else{
_currentAttrValue ++ ;
} if(attr == 'opacity'){
node.style[attr] = _currentAttrValue/100;
node.style.filter = 'alpha(opacity:'+_currentAttrValue+')';
}else{
console.log(_currentAttrValue);
node.style[attr] = _currentAttrValue+'px';
}
}
}
if(success){
clearInterval(timer);
if(fn){
fn();
}
}
},10)
} function getStyle(ele,attr){ if(window.getComputedStyle){
return getComputedStyle(ele,null)[attr];
}else{
return ele.currentStyle[attr];
} } }
</script>
</html>
自己去体会一下，当所有的属性到达目标的时候，才能清空定时器，不然有些属性没有到达属性的目标值就停止了。
大家可以可以去参考一下jquery的animate的方法，支持同时运动
js动画之同时运动的更多相关文章
- js动画---多物体运动
对于多物体运动和单个物体运动来说,没有特别大的区别,实现原理基本上是一样的,都是通过定时器来实现的,但是多物体有一些地方需要注意,具体哪些需要注意,我将在下面的程序中说明. 首先,我们需要建立几个li ...
- js动画之简单运动一
虽然现在css3已经有了很多动画效果希望后面有时间也写一些博客,但是先开始我们的基础动画的学习. 1.制作动画常用的属性就是left,right,height,width,opacity等属性 2.因 ...
- js动画之链式运动
链式运动就是当一个运动完,又启动另外一个运动,这个怎么实现呢?这里我们是用用回调函数实现一套链式动画 显示给div左移100像素,然后然后透明度变100 <!DOCTYPE html> & ...
- js动画之缓冲运动
缓冲运动就是运动的速度与时间或者距离有关联,不是一般的匀速运动 <!DOCTYPE html> <html lang="en"> <head> ...
- js动画之简单运动二
透明度的变化 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- js动画--链式运动
前面几节我们只是讲述了一种运动,这节课我将讲述链式运动:就以一个动作接着一个动作完成. 对于这个实现,我们只需要改变一下就可以实现了,设置一个回调函数. var timer; window.onloa ...
- JS动画理论
动画(Animation) 动画意味着随着时间而变化,尤其指视觉上的变化,包括位置.形态等的变化.运动基本上表现为物体随时间,发生位置上的变化:形态基本表现为大小.颜色.透明度.形状等随时间的变化. ...
- js动画学习（二）
四.简单动画之缓冲运动 实现速度的缓冲,即不同位置的速度不同,越靠近目标值速度越小,所以速度值与目标值与当前值之差成正比.这里要注意一个问题就是物体在运动中速度是连续变化的,不是按照整数变化的,当物体 ...
- js动画（四）
终于到了最后了,这里要告一段落了,整了个js运动框架,咳咳咳,好冷 啊啊啊啊啊啊,这天气.妈的,工资怎么也不发,啊,说好的 人与人之间的信任呢?哎,气诶,不到150字啊,又是这个梗..怎么办?说些什么 ...
随机推荐
- Linux进程管理
一.进程管理简介 进程是正在执行的程序或命令,每一个进程都是一个运行实体,都有自己的地址空间,并占用一定的系统资源. 进程管理的作用: 1.判断服务器的健康状态 2.查看系统中的所有进程 3.杀死进程 ...
- html5 formData上传 针对app端
function uploadFile() { if ((document.getElementById("file").files[0].size / 1024).toFixed ...
- ROS学习笔记（二）——ubantu 14.04 安装
0.采用双系统安装(U盘安装) 1.安装文件在ubantu官网下载: ubantu官网 :https://www.ubuntu.com/ ubuntu的server版和desktop版有什么区? (来 ...
- C# for循环 循环中先求长度还是使用list.Count，哪个效率高
这种问法可能问的不好.应该说成是第一种方法完全没有必要,很多人可能以为那样会为代码带来效率,而实际上是不会给效率带来任何提升. 因为事实上,索引器内部,为了安全期间,还是会去求整个list的count ...
- `UnityEditor.EditorUtility' does not contain a definition for `GetMiniThumbnail'
I got the following errors with Untiy 4.0f7error CS0117: `UnityEditor.EditorUtility' does not contai ...
- 关于Cookies与Session系列一
这两个东西,最近项目操作的比较少,不过这两个在Web项目开发中一直都扮演着很重要的角色,有时有些细节会不小心就遗忘掉. Cookies 的概述 Cookies是由服务器端生成,发送给客户端,用来保存 ...
- js的规范写法ES5（自己以后按照这样写）
1.引号的使用,单引号' ' 优先(如果不是引号嵌套,不要使用双引号) 正常情况:console.log('hello there') 双引号转码: $("<div cl ...
- pandas修改列的顺序
http://www.cnblogs.com/zhoudayang/p/5414020.html cols = list(ret)cols.insert(0,cols.pop(cols.index(' ...
- 判断整数是否能被n整除
(1)1与0的特性: 1是任何整数的约数,即对于任何整数a,总有1|a. 0是任何非零整数的倍数,a≠0,a为整数,则a|0. (2)若一个整数的末位是0.2.4.6或 ...
- Swift 08.页面传值
OC中经常用到的一种初始化控制器的方法.比如A push B.并且将A的一个值:value 传递给B 使用.简单的办法就是 在B重构init方法.比如在.h 中定义: - ()initValue:(N ...