JavaScript 多个属性一起变化

原创 2017年01月03日 20:49:10
<!DOCTYPE html>
<html>
	<head>
		<title>运动效果</title>
		<meta charset="utf-8" />
	</head>
		<style>
			div {
				width: 150px;
				height: 150px;
				background: aliceblue;
				opacity: 1;
				border-radius:75px;
			}
		</style>
		<script>
			window.onload = function(){
				var oDiv = document.getElementsByTagName('div')[0];
				oDiv.onclick = function(){
					mixedAnimation(this,{"width":500,"height":500,"opacity":0.5,"border-radius":250},2000);
				}
				function mixedAnimation(obj,options,time)
				{
					//记录所有的起始属性
					var start = [];
					//记录所有属性的变量量
					var delta = [];
					//循环遍历 
					for (var name in options) {
						//将所有的起始属性,保存在start[]数组中
						start[name] = parseFloat(getStyle(obj,name));
						//将所有属性的变化量,保存在delta[]数组中
						delta[name] = options[name] - start[name];
					}
					//计算变换的总次数(向上取整)
					var total = Math.ceil(time/30);
					//记录现在的变换次数是哪一次
					var count = 0;
					
					var timer = setInterval(function(){
						//记录 变化次数	
						count++;
						for (var name in options) {
							//定义unit
							var unit = 'px';
							if(name == 'opacity') {
								unit = '';
							}
							//如果是最后一次变化
							if (count == total) {
								obj.style[name] = options[name] + unit;
							} else {
								obj.style[name] = start[name]+delta[name]*count/total + unit;
							}
						}
						if (count == total){
							clearInterval(timer);
							timer = null;
						}
					
					},30);
					
				}
				function getStyle(obj, attr)
				{
					if (typeof(obj.currentStyle) == 'undefined') {
						return getComputedStyle(obj,null)[attr];
					}
					return obj.currentStyle[attr];
				}	
			}
		</script>
	<body>
		<div></div>
	</body>
</html>

pads布局布线技巧(【PCB文件中显示引脚号】 【敷铜】 【显示网络名】 【高亮网络】 【修改PCB中文本的尺寸】 【同时修改多个文本(对象)的尺寸(属性) 让集中在一起的元件散开)

pads原理图背景默认是黑色的,改变背景颜色的办法如下: ctrl+alt+c就出来一个界面了,里面的background就是图纸的颜色了,lines就是线的颜色了。比如你想让图纸变成白色,就先点击颜...

多个onclick在一起只执行最后一个的问题解,其它是事件处理引发的问题 (JavaScript的监听事件函数attachEvent和addEventListener)

JavaScript的监听事件函数attachEvent和addEventListener使用方法 第一 :当同一个对象使用.onclick的写法触发多个方法的时候,后一个方法会把前一个...

JavaScript一起学之五:详解“0级DOM”——Document对象的属性和方法

所谓“0级DOM”: 一个文档对象模型或者说DOM就是一个API,它定义了如何访问组成一个文档的对象。W3C定义了一个标准的DOM。在此之前,当Netscape浏览器还是领先的浏览器厂商的时候,Ne...

javascript之属性操作、innerHTML、判断、自增、操作多个样式的方法和不兼容的属性

一.javascript的属性操作。(利用对属性“读”和“写”的操作来完成一些应用) 例1:读写输入结合切换图片。在输入框内输入图片的间接地址,按确定按钮后能在页面中加载出来图片,并且可以通过改变地...

gabor变化的多个程序

  • 2014年11月23日 14:24
  • 16.23MB
  • 下载

穆穆读的一些书籍推荐,读书的理由?读书的好处?为什么要读书?读什么书?让我们一起来读书,总之我们需要学习新的东西来适应这个社会的飞速变化。

穆穆读的一些书籍推荐,读书的理由?读书的好处?为什么要读书?读什么书?让我们一起来读书,总之我们需要学习新的东西来适应这个社会的飞速变化。   书籍是人类进步的阶梯,   Ø  现在社会是一个...
  • movno1
  • movno1
  • 2013年09月29日 19:33
  • 862

arduino 多个程序一起工作程序

  • 2015年10月26日 14:20
  • 1KB
  • 下载

关于Eclipse如何加入Gradle文件与Android Studio两个平台一起开发,工作目录不发生变化

前言: 本来很久之前想弄这玩意,不过因为各种原因,所以没弄。 今天有位前辈提出需求。说想让Eclipse的Android项目逐步走向Android Studio,但是又担心Android ...
  • FYBH_2k
  • FYBH_2k
  • 2015年10月26日 11:41
  • 432
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript 多个属性一起变化
举报原因:
原因补充:

(最多只允许输入30个字)