标签: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毫秒走一次,一规定的时间里走完这段距离的总次数。
标签:style blog io ar sp java for on 数据
原文地址:http://www.cnblogs.com/wujidns/p/4127471.html