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字啊,又是这个梗..怎么办?说些什么 ...
随机推荐
- dispatch a action with a timeout
程序入口文件添加依赖: import { createStore, applyMiddleware } from 'redux' import thunk from 'redux-thunk' // ...
- Linux系统下配置Tomcat
1.将下载好的tomcat文件拷贝至/usr/java文件夹中: cp apache-tomcat-7.0.72.tar.gz /usr/java 2.进入/usr/java文件夹: cd /usr/ ...
- JQ入门学习实战演练
选择器是JQuery一大特色,所有的DOM操作.事件操作.Ajax操作都离不开选择器.熟练掌握JQuery的选择器,可以节省很多代码,很大程序上简化我们的脚本编程工作. JQuery的选择器很类似于样 ...
- 流媒体测试笔记记录之————阿里云监控、OBS、FFmpeg拉流和推流变化比较记录
OBS设置视频(512kbps)和音频(128kbps)比特率 阿里云监控结果: 使用FFmpeg拉流到Nginx 服务器测试比特率 第二次测试,修改视频和音频比特率 OBS设置 阿里云监控 Ngin ...
- appium 等待方法 转
前些日子,配置好了appium测试环境,至于环境怎么搭建,参考:http://www.cnblogs.com/tobecrazy/p/4562199.html 知乎Android客户端登陆:htt ...
- Android 升级SQLite数据库
每一个数据库版本都会对应一个版本号,当指定的数据库版本号大于当前数据库的版本号时,就会进入到onUpGrade()方法中去执行更新操作.需要为每一个版本号赋予其各自改变的内容然后再onUpgrade( ...
- android 画虚线、实线，画圆角矩形，一半圆角
1.画虚线,实线: 建立dotted_line_gray.xml文件放在drawable文件夹下面. android:shape="line" 可以修改你想要的形状 <?xm ...
- centos6.7 mutlipath install script
#!/bin/bash if [ `id -g` != 0 ] ;then echo -e "\033[31m Please use root user\033[0m" exit ...
- oracle 存储过程创建及执行简单实例
1. 创建 CREATE OR REPLACE PROCEDURE getAplage(eNo IN NUMBER,salary OUT NUMBER) AS BEGIN SELECT AplAge ...
- [mobile开发碎碎念]手机页面上显示PDF文件
demo:http://mozilla.github.io/pdf.js/web/viewer.html 项目地址:https://github.com/mozilla/pdf.js <scri ...