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>

javascript 监听对象属性的变化

许多优秀的MVVM框架都实现了数据的双向绑定。Vue.js采用监听-回调的方式来实现一向功能。监听回调的一般写法是这样的:    obj.watch(pro,function(new_value,...
  • huangbinzhang
  • huangbinzhang
  • 2016年12月01日 11:16
  • 2858

多个css合在一起写

.right .icona,.icona,.iconb,.iconc,.icond,.icone,.iconf{ //注意:有两个icona,如果只有一个的话,icona就不会有设置效果,所以要增加...
  • mozuncangtianbaxue
  • mozuncangtianbaxue
  • 2017年08月24日 01:52
  • 197

jQuery中的多个元素修改同一个属性

// 输入框中输入文字的时候,字都消失     $('input[type="text"]').bind('input', function() {         $('.search-box ...
  • qiaoqiao10001
  • qiaoqiao10001
  • 2017年02月24日 11:14
  • 136

JavaScript 根据数组内的多个属性进行排序

sort() 方法用于对数组的元素进行排序,并返回数组。默认排序顺序是根据字符串Unicode码点。 如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两...
  • qq_37724450
  • qq_37724450
  • 2018年02月02日 18:22
  • 31

原生js实现检测对象变化

最近这段时间,前端开发开始逐渐模块化,一些MVC、MVVM等框架比较流行,比如angular、vue、react;这三个框架比较相似的有一点就是数据的双向绑定,视图的更新导致相应数据变化,数据的改变引...
  • qq_34829112
  • qq_34829112
  • 2017年07月29日 18:01
  • 1082

ios观察者设计模式。(在一个类监听另一个类属性的变化时响应)

什么是观察者模式 什么是观察者模式?你曾经订阅过报纸吗?在订阅报纸的时候,你不用去任何地方,只需要将你的个人地址信息以及订阅信息告诉出版社,出版社就知道如何将相关报纸传递给你。这种模式的第二个名称叫...
  • hhh901119
  • hhh901119
  • 2016年04月29日 18:38
  • 1691

界面上单元格的可操作性和背景颜色根据某一个单元格值的变化而发生改变

在[字段构件]下字段的对应事件的[脚本内容]写入类似如下的代码: var w=MastercurRowNo; if (MastercurGUIState== 2) w=10; ...
  • iPlatForm
  • iPlatForm
  • 2016年02月08日 10:29
  • 734

dom监听属性的变化

方法一,,兼容火狐 ,opero不支持chrome Document 修改特性 var box=document.getElementById("box"); var btn=$("...
  • houdabiao
  • houdabiao
  • 2017年08月01日 16:30
  • 342

设置了winform的背景图片随窗体的变化而变化

private void mainform_Paint(object sender, PaintEventArgs e)        {            Graphics g = e....
  • lchyz89
  • lchyz89
  • 2014年05月21日 09:25
  • 754

KVO-对象属性值改变监听

key value observer 键值观察 一、使用方法: 以person对象为例,person中的属性name,监听name值改变的方法 //添加监听的属性keyPath  optio...
  • u010438187
  • u010438187
  • 2015年07月17日 13:51
  • 2167
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript 多个属性一起变化
举报原因:
原因补充:

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