码迷,mamicode.com
首页 > 其他好文 > 详细

运动函数move 各种各样的运动都可以做

时间:2014-11-28 00:49:36      阅读:173      评论:0      收藏:0      [点我收藏+]

标签:style   blog   io   ar   sp   java   for   on   数据   

 在这里我说的还是那种匀速运动,主要是通过改变一个盒模形的left值和top 值,来实现运动,或者,改变模形的自身的属性,来动起来:

 

function getStyle(obj,name){
	return obj.currentStyle?obj.currentStyle[name]:getComputedStyle(obj,false)[name];
};

function move(obj,json,options){
	options=options||{};
	options.time=options.time||700;

	var start={};
	var dis={};

	for(var name in json){
		if(name==‘opacity‘){
			start[name]=parseFloat(getStyle(obj,name));
		}else{
			start[name]=parseInt(getStyle(obj,name));
		};
		dis[name]=json[name]-start[name];
	};
	var count=Math.round(options.time/30);
	var n=0;

	clearInterval(obj.timer);
	obj.timer=setInterval(function(){
		n++;

		for(var name in json){
			var cur=start[name]+dis[name]*n/count;

			if(name==‘opacity‘){
				obj.style.opacity=cur;
				obj.style.filter=‘alpha(opacity:‘+cur*100+‘)‘;
			}else{
				obj.style[name]=cur+‘px‘;
			}
		}
	},30);

}

  

getStyle这个函数是获取样式属性的,前面这块已经说过了;

这里要说一下的是动运的公式:

开始的距离+(终点距离-起点距离)*运动了几次/一共能运动多少次;

开始的距离这里用start表示,终点距离用了一个json数据,json[name],就代表是终点距离,n 代表运动了几次,count 代表,30毫秒走一次,一规定的时间里走完这段距离的总次数。


运动函数move 各种各样的运动都可以做

标签:style   blog   io   ar   sp   java   for   on   数据   

原文地址:http://www.cnblogs.com/wujidns/p/4127471.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!