js 框架： 

function getStyle(obj,attr){

	if(obj.currentStyle){

		return obj.currentStyle[attr];

	}

	else{

		return getComputedStyle(obj,false)[attr];

	}

}

function startMove(obj,json,fn){

	var flag = true;//如果

	clearInterval(obj.timer);

	obj.timer = setInterval(function(){

		for(var attr in json)

		{

			//取当前值

			var icur = 0;

			if(attr == 'opacity'){

				icur = Math.round(parseFloat(getStyle(obj,attr))*100);

			}

			else{

				icur = parseInt(getStyle(obj,attr))

			}

			//算速度

			var speed = (json[attr]-icur)/8;

			speed = speed >0?

Math.ceil(speed):Math.floor(speed);

			//检測停止

			if(icur != json[attr]){

				flag = false;

			}

			if(attr == 'opacity'){

				obj.style.filter = 'alpha(opacity:'+(icur +speed)+')';

				obj.style.opacity = (icur + speed)/100;

			}

			else{

					obj.style[attr] = icur + speed + 'px';

			}

		}

		if(flag){

			clearInterval(obj.timer);

			if(fn){

				fn();

			}

		}

	},30)

}

链式动画（前一个动作完毕。后一个动作继续）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>链式框架</title>

<style>

body,ul,li{

	margin:0;

	padding:0;

	}

ul,li{

	list-style:none;

}

ul li{

	width:200px;

	height:100px;

	margin-bottom:10px;

	background:yellow;

	border: 4px solid #000;

	filter:alpha(opacity:30);

	opacity: 0.3;

	}

</style>

<script src="move.js"></script>

<script>

window.onload = function(){

	var li = document.getElementById('li1');

	li.onmouseover = function(){

		startMove(li,'width',400,function(){

			startMove(li,'height',200,function(){

				startMove(li,'opacity',100);

			});

		});

	}

	li.onmouseout = function(){

		startMove(li,'opacity',30,function(){

			startMove(li,'height',100,function(){

				startMove(li,'width',200);

			});

		});

	}

}

</script>

</head>

<body>

<ul>

	<li id="li1"></li>

</ul>

</body>

</html>



同一时候动画（多个动作同一时候完毕）：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>同一时候动画</title>

<style>

body,ul,li{

	margin:0;

	padding:0;

	}

ul,li{

	list-style:none;

}

ul li{

	width:200px;

	height:100px;

	margin-bottom:10px;

	background:yellow;

	border: 4px solid #000;

	filter:alpha(opacity:30);

	opacity: 0.3;

	}

</style>

<script src="move.js"></script>

<script>

window.onload = function(){

	var oli = document.getElementById('li1');

	oli.onmouseover = function(){

		startMove(oli,{width:400,height:200,opacity:100});

	}

	oli.onmouseout = function(){

		startMove(oli,{width:200,height:100,opacity:30});

	}

}

</script>

</head>

<body>

<ul>

	<li id="li1"></li>

</ul>

</body>

</html>




												


											
js 动画3 完美框架的更多相关文章
	

    
								
  1. js动画学习（五）
		
    九.多属性同时运动 前面的例子都是每个属性单独运动,如果想要多属性同时运动怎么办?比如,我想要一个div的onmouseover事件中宽和高同时变化.下面这个函数是单独变宽: window.onloa ...
    
		
    2. 
						
  2. js动画（四）
		
    终于到了最后了,这里要告一段落了,整了个js运动框架,咳咳咳,好冷 啊啊啊啊啊啊,这天气.妈的,工资怎么也不发,啊,说好的 人与人之间的信任呢?哎,气诶,不到150字啊,又是这个梗..怎么办?说些什么 ...
    
		
    3. 
						
  3. JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能
		
    摘要: 理解浏览器渲染. 原文:JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门探索 J ...
    
		
    4. 
						
  4. JS神经网络deeplearn.js:浏览器端机器智能框架
		
    JS神经网络deeplearn.js:浏览器端机器智能框架 通过 deeplearn.js,可以实现在浏览器中训练神经网络模型,也可在推理阶段运行预训练模型. deeplearn.js 以 TypeS ...
    
		
    5. 
						
  5. 基于 Vue.js 之 iView UI 框架非工程化实践记要   使用 Newtonsoft.Json 操作 JSON 字符串  基于.net core实现项目自动编译、并生成nuget包  webpack + vue 在dev和production模式下的小小区别    这样入门asp.net core 之 静态文件   这样入门asp.net core，如何
		
    基于 Vue.js 之 iView UI 框架非工程化实践记要   像我们平日里做惯了 Java 或者 .NET 这种后端程序员,对于前端的认识还常常停留在 jQuery 时代,包括其插件在需要时就引 ...
    
		
    6. 
						
  6. Ember.js和Vue.js对比，哪个框架更优秀？
		
    本文由葡萄城技术团队于博客园翻译并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. JavaScript最初是为Web应用程序创建的.但是随着前端技术的 ...
    
		
    7. 
						
  7. 【06-23】js动画学习笔记01
		
    <html> <head> <style> * { margin:0; padding:0; } #div1{ width:200px; height:200px; ...
    
		
    8. 
						
  8. css动画与js动画的区别
		
    CSS动画 优点: (1)浏览器可以对动画进行优化.   1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout ...
    
		
    9. 
						
  9. CSS VS JS动画，哪个更快[译]
		
    英文原文:https://davidwalsh.name/css-js-animation 原作者Julian Shapiro是Velocity.js的作者,Velocity.js是一个高效易用的js ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 【Linux】创建不可修改文件
			
    有时候,我们害怕别人修改我们创建的文件,或者是误删我们创建的文件,那么我们可以使用下面的方法进行控制即可 1.创建不可删除文件 Linux:/qinys/oliver # touch test.sh  ...
    
			
    2. 
						
  2. 转 安装Nginx 1.2.0+PHP 5.4.3（FastCGI）+MySQL 5.5.24
			
    硬件环境:Dell PowerEdge 1950,4核Intel(R) Xeon(R) CPU E5410  @ 2.33GHz4G内存 系统环境:CentOS release 5.2,内核版本: 2 ...
    
			
    3. 
						
  3. centos 7 系统启动不了 出现报错dependency failed for /mnt , dependency failed for  local file systems
			
    阿里云一台Ecs重启后启动不了,出现报错 dependency failed for /mnt , dependency failed for local file systems ,  报错的原因  ...
    
			
    4. 
						
  4. blktrace + blkparse + btt 分析IO
			
    blktrace是一款block层的trace工具,block层在IO路径上的位置: 一个IO的生命周期大约是: ● I/O enters block layer – it can be: – Rem ...
    
			
    5. 
						
  5. 入门程序，hello world
			
    RabbitMQ是消息代理.从本质上说,它接受来自生产者的信息,并将它们传递给消费者.在两者之间,它可以根据你给它的路由,缓冲规则进行传递消息. 一.专业术语 1. 生产者: 在现实生活中就好比制造商 ...
    
			
    6. 
						
  6. 做一个合格的Team Leader －－ 领导和管理基本概念 三种激励手段：恐吓、贪念、承诺
			
    做一个合格的Team Leader -- 基本概念 1.领导和管理   人们乐于被领导:他们不喜欢被管理,不喜欢像牛一样被驱赶或指挥.   管理者强迫人们服从他们的命令,而领导者则会带领他们一起工作. ...
    
			
    7. 
						
  7. Ubuntu终端命令行播放音乐(mp3)
			
    有很多在终端命令行播放mp3的工具,有的甚至可以生成播放列表.也只有命令行重度使用者有这个需求,下面我们来看一看这些工具. Sox Sox(Sound eXchange)是操作声音文件的瑞士军刀,它可 ...
    
			
    8. 
						
  8. idea 不下载jar包
			
    是因为用的gradle 然后没有设置gradle jvm
    
			
    9. 
						
  9. 【JQuery】jQuery(document).ready(function($) { });的几种表示方法及load和ready的区别
			
    jQuery中处理加载时机的几种方式 第一种: jQuery(document).ready(function() { alert("你好"); }); //或 $(documen ...
    
			
    10. 
						
  10. WebAPI调用笔记  ASP.NET CORE 学习之自定义异常处理  MySQL数据库查询优化建议  .NET操作XML文件之泛型集合的序列化与反序列化  Asp.Net Core 轻松学-多线程之Task快速上手  Asp.Net Core 轻松学-多线程之Task(补充)
			
    WebAPI调用笔记   前言 即时通信项目中初次调用OA接口遇到了一些问题,因为本人从业后几乎一直做CS端项目,一个简单的WebAPI调用居然浪费了不少时间,特此记录. 接口描述 首先说明一下,基于 ...
    
			
    11.