js 框架： 

  1. function getStyle(obj,attr){
  2. 	if(obj.currentStyle){
  3. 		return obj.currentStyle[attr];
  4. 	}
  5. 	else{
  6. 		return getComputedStyle(obj,false)[attr];
  7. 	}
  8. }
  9.  
  10. function startMove(obj,json,fn){
  11. 	var flag = true;//如果
  12. 	clearInterval(obj.timer);
  13. 	obj.timer = setInterval(function(){
  14. 		for(var attr in json)
  15. 		{
  16. 			//取当前值
  17. 			var icur = 0;
  18. 			if(attr == 'opacity'){
  19. 				icur = Math.round(parseFloat(getStyle(obj,attr))*100);
  20. 			}
  21. 			else{
  22. 				icur = parseInt(getStyle(obj,attr))
  23. 			}
  24. 			//算速度
  25. 			var speed = (json[attr]-icur)/8;
  26. 			speed = speed >0?
  27.  
  28. Math.ceil(speed):Math.floor(speed);
  29. 			//检測停止
  30. 			if(icur != json[attr]){
  31. 				flag = false;
  32. 			}
  33. 			if(attr == 'opacity'){
  34. 				obj.style.filter = 'alpha(opacity:'+(icur +speed)+')';
  35. 				obj.style.opacity = (icur + speed)/100;
  36. 			}
  37. 			else{
  38. 					obj.style[attr] = icur + speed + 'px';
  39. 			}
  40. 		}
  41. 		if(flag){
  42. 			clearInterval(obj.timer);
  43. 			if(fn){
  44. 				fn();
  45. 			}
  46. 		}
  47. 	},30)
  48. }

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

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>链式框架</title>
  6. <style>
  7. body,ul,li{
  8. 	margin:0;
  9. 	padding:0;
  10. 	}
  11. ul,li{
  12. 	list-style:none;
  13. }
  14. ul li{
  15. 	width:200px;
  16. 	height:100px;
  17. 	margin-bottom:10px;
  18. 	background:yellow;
  19. 	border: 4px solid #000;
  20. 	filter:alpha(opacity:30);
  21. 	opacity: 0.3;
  22. 	}
  23. </style>
  24. <script src="move.js"></script>
  25. <script>
  26. window.onload = function(){
  27. 	var li = document.getElementById('li1');
  28. 	li.onmouseover = function(){
  29. 		startMove(li,'width',400,function(){
  30. 			startMove(li,'height',200,function(){
  31. 				startMove(li,'opacity',100);
  32. 			});
  33. 		});
  34. 	}
  35. 	li.onmouseout = function(){
  36. 		startMove(li,'opacity',30,function(){
  37. 			startMove(li,'height',100,function(){
  38. 				startMove(li,'width',200);
  39. 			});
  40. 		});
  41. 	}
  42. }
  43. </script>
  44. </head>
  45.  
  46. <body>
  47. <ul>
  48. 	<li id="li1"></li>
  49. </ul>
  50. </body>
  51. </html>
  1.  

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

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>同一时候动画</title>
  6. <style>
  7. body,ul,li{
  8. 	margin:0;
  9. 	padding:0;
  10. 	}
  11. ul,li{
  12. 	list-style:none;
  13. }
  14. ul li{
  15. 	width:200px;
  16. 	height:100px;
  17. 	margin-bottom:10px;
  18. 	background:yellow;
  19. 	border: 4px solid #000;
  20. 	filter:alpha(opacity:30);
  21. 	opacity: 0.3;
  22. 	}
  23. </style>
  24. <script src="move.js"></script>
  25. <script>
  26. window.onload = function(){
  27. 	var oli = document.getElementById('li1');
  28. 	oli.onmouseover = function(){
  29. 		startMove(oli,{width:400,height:200,opacity:100});
  30. 	}
  31. 	oli.onmouseout = function(){
  32. 		startMove(oli,{width:200,height:100,opacity:30});
  33. 	}
  34. }
  35. </script>
  36. </head>
  37.  
  38. <body>
  39. <ul>
  40. 	<li id="li1"></li>
  41. </ul>
  42. </body>
  43. </html>

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

  1. js动画学习（五）

    九.多属性同时运动 前面的例子都是每个属性单独运动,如果想要多属性同时运动怎么办?比如,我想要一个div的onmouseover事件中宽和高同时变化.下面这个函数是单独变宽: window.onloa ...

  2. js动画（四）

    终于到了最后了,这里要告一段落了,整了个js运动框架,咳咳咳,好冷 啊啊啊啊啊啊,这天气.妈的,工资怎么也不发,啊,说好的 人与人之间的信任呢?哎,气诶,不到150字啊,又是这个梗..怎么办?说些什么 ...

  3. JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能

    摘要: 理解浏览器渲染. 原文:JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门探索 J ...

  4. JS神经网络deeplearn.js:浏览器端机器智能框架

    JS神经网络deeplearn.js:浏览器端机器智能框架 通过 deeplearn.js,可以实现在浏览器中训练神经网络模型,也可在推理阶段运行预训练模型. deeplearn.js 以 TypeS ...

  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. Ember.js和Vue.js对比，哪个框架更优秀？

    本文由葡萄城技术团队于博客园翻译并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. JavaScript最初是为Web应用程序创建的.但是随着前端技术的 ...

  7. 【06-23】js动画学习笔记01

    <html> <head> <style> * { margin:0; padding:0; } #div1{ width:200px; height:200px; ...

  8. css动画与js动画的区别

    CSS动画 优点: (1)浏览器可以对动画进行优化.   1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout ...

  9. CSS VS JS动画，哪个更快[译]

    英文原文:https://davidwalsh.name/css-js-animation 原作者Julian Shapiro是Velocity.js的作者,Velocity.js是一个高效易用的js ...

随机推荐

  1. 激光数据匹配（MATLAB Robotics System Toolbox）

    正态分布变换算法是一个配准算法,它应用于三维点的统计模型,使用标准最优化技术来确定两个点云间的最优的匹配,因为其在配准过程中不利用对应点的特征计算和匹配,所以时间比其他方法快.算法细节可以参考:NDT ...

  2. django之异常错误3(Student matching query does not exist.)

    错误提示: DoesNotExist at /blog/test2/ Student matching query does not exist. 说明:错误提示说明错误在test2中,查找数据库的表 ...

  3. python之函数用法capitalize()

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #python之函数用法capitalize() #capitalize() #说明:将字符串的第一个字母变成 ...

  4. RHEL7 Apache 服务测试

    把防火墙和selinux关闭,这样试验过程中就不用配置相关策略了. 实验一.安装apache,并提供服务 在RHEL1上 #yum install -y httpd #echo basictest & ...

  5. redis对key的基本操作

    不忘初心,励志前行 del key1 key2 ... Keyn作用: 删除1个或多个键返回值: 不存在的key忽略掉,返回真正删除的key的数量 rename key newkey作用: 给key赋 ...

  6. β particle, α particle, γ ray, ionization chamber

    Alpha particles consist of two protons and two neutrons bound together into a particle identical to ...

  7. 微信小程序，创业新选择

    微信小程序,创业新选择 创业者们 总是站在时代的风口浪尖,他们踌躇满志无所畏惧,这大概就是梦想的力量.但是,如果没有把梦想拆解成没有可预期的目标和可执行的实现路径那么一切都只能叫做梦想. 小程序 张小 ...

  8. 初始建库SGA该设多大、PGA该设多大的建议

    1.背景情况 非常多新业务系统上线,大部分DBA也不懂业务.就闷着头建库,SGA值设多大,PGA设多大,随便指定一个值就得了,执行一段时间后,或许就由于这个值是随便指定的.比如SGA+PGA大于总物理 ...

  9. Using PHP as a Spring MVC View via Quercus(转)

    原贴: http://blog.caucho.com/2009/04/14/using-php-as-a-spring-mvc-view-via-quercus/ This week, I’ve be ...

  10. JavaScript Window Navigator　浏览器本身的信息

    window.navigator 对象包含有关访问者浏览器的信息. Window Navigator window.navigator 对象在编写时可不使用 window 这个前缀. Navigato ...