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字啊,又是这个梗..怎么办?说些什么 ...
随机推荐
- oracle过滤字母
select regexp_replace(col,'[A-Za-z]') from dual; --> 12345col 列名
- JFinal - Handler 处理流程
Handler 处理流程 doFilter - Handler 链中每个 handler.handle(...) 容器初始化时访问 web.xml 配置的 JFinalFilter.doFilter. ...
- DNS域名解析服务器
域名解析服务器,靠它把你要访问的网址找到然后把信息送到你电脑上.DNS 是域名系统 (Domain Name System) 的缩写,它是由解析器和域名服务器组成的.域名服务器是指保存有该网络中所有主 ...
- Spring-boot-admin功能说明
http://blog.csdn.net/xingfulangren/article/details/52304413 **************************************** ...
- 转！！left join on and 与 left join on where的区别
数据库在通过连接两张或多张表来返回记录时,都会生成一张中间的临时表,然后再将这张临时表返回给用户. 在使用left jion时,on和where条件的区别如下: 1. on条件是在生成临时 ...
- property内存管理策略
1普通数据,用weak 2delegate,用weak 3一般对象,用strong 4NSString,用copy 5block,用copy
- Linq常用语法详细
1.简单的linq语法 //1 var ss = from r in db.Am_recProScheme select r; //2 var ss1 = db.Am_recProScheme; // ...
- 如何在页面进入时就加载js
页面一打开就执行JS的代码! onLoadwindow.onLoad=function(){}window.onload=function(){ } 补充:window.onload和doucumen ...
- SPSS数据分析—配对Logistic回归模型
Lofistic回归模型也可以用于配对资料,但是其分析方法和操作方法均与之前介绍的不同,具体表现 在以下几个方面1.每个配对组共有同一个回归参数,也就是说协变量在不同配对组中的作用相同2.常数项随着配 ...
- Lua 与 Redis
Lua 与 Redis 标签: Java与NoSQL 从 2.6版本 起, Redis 开始支持 Lua 脚本 让开发者自己扩展 Redis - 案例-实现访问频率限制: 实现访问者 $ip 在一定的 ...