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字啊,又是这个梗..怎么办?说些什么 ...
随机推荐
- Cocos2d-x lua 游戏中的文字和标签
游戏场景中的文字分为静态文字和动态文字,在图片中的文字为静态文字,不能通过程序访问,而且无法动态修改内容,但是表现力丰富.动态文字一般需要通过程序访问,需要动态修改内容可以通过标签(Label or ...
- Linux C++线程池
.为什么需要线程池? 部分应用程序需要执行很多细小的任务,对于每个任务都创建一个线程来完成,任务完成后销毁线程,而这就会产生一个问题:当执行的任务所需要的时间T1小于等于创建线程时间T2和销毁线程时间 ...
- FtpClient.storeFile返回false解决方法
在确定路径和文件名没有中文的情况下添加以下代码 ftp.setFileTransferMode(ftp.BINARY_FILE_TYPE); ftp.enterLocalPassiveMode();/ ...
- javascript 随笔
document.execCommand("SaveAs",true,"aaa"); //将当前web页面另存为文件.第三个参数为文件名,可以自己设置,为空的时 ...
- 使用Angularjs的ng-cloak指令避免页面乱码
在使用Anguarjs进行web开发或者进行SPA(single page application)开发时,往往会遇到下面这样的问题. 刷新页面时,页面会出现一些乱码,这里的乱码具体是指`{{expr ...
- ajax 和 post 传多个参数值具体怎么写
ajax data:{id:id,name:name} 正确 data:{id:"001",name:"王俊凯"} 正确 data:{"id" ...
- C# 发送qq邮箱
注意: QQ邮箱的简单邮件传输协议(SMTP)使用了SSL加密,必须启用SSL加密.指定端口. QQ邮箱POP3/SMTP服务默认是关闭的,需要开启服务(设置=>账户=>开启服务). QQ ...
- xml报文解析和组装
package com.xjts.cipher.util;import java.io.File;import java.io.FileWriter;import java.io.IOExceptio ...
- Python之路 day3 函数定义 *args及**kwargs
#!/usr/bin/env python # -*- coding:utf-8 -*- #Author:ersa import time # def logger(): # time_format ...
- js递归方法创建节点
var jsonData = [{,,"subnetRemark":"状态自带","subnetName":"中心网络" ...