九、多属性同时运动
前面的例子都是每个属性单独运动,如果想要多属性同时运动怎么办?比如,我想要一个div的onmouseover事件中宽和高同时变化。下面这个函数是单独变宽:
window.onload=function(){ var ob1=document.getElementById('div1'); ob1.onmouseover=function(){ startMove(ob1,'width',400); } }
有一个想法就是在startMove下面再加一个startMove:
window.onload=function(){ var ob1=document.getElementById('div1'); ob1.onmouseover=function(){ startMove(ob1,'width',400); startMove(ob1,'height',400); } }
事实证明这种想法是错误的,这么写只有高变了,而宽没变。为什么呢?因为startMove函数的起初就是关闭定时器,当第一个startMove函数刚刚开始执行时,第二个startMove已经开始执行,第二个startMove的关闭定时器功能将第一个startMove的定时器覆盖掉了,所以物体的宽无法变化,变的只有高。那么如何解决?这里需要用到json:
var json={a:12,b:13}; for(var i in json){ alert(i); alert(json[i]); }
json里的值是成对出现的,每一对为变量和变量的值。可以用for in循环来获取每一对的变量以及对应的值。上面程序依次弹出a,12,b,13 。
下面来看一下stareMove框架,发现参数里的“属性”和“目标值”是一对值,也就是说一个startMove只能实现一对值的变化。如何实现多对值的变化?来看看这个样子的startMove :
startMove(obj,{attr1:target1,attr2:target2},fn),蓝色部分就是json的形式,所以在原来的startMove基础上,将蓝色部分换成json ;将程序中的target换成json[attr](是哪个属性,就是那个属性的目标值)。改变完的startMove函数如下:(第1,4,13,16行做了改动)
function startMove(obj,json,fn) {//元素,改变的样式属性,达到的目标值,回调函数 clearInterval(obj.timer); obj.timer=setInterval(function(){ for(var attr in json){ //1.取当前值 var icur=0;//icur返回物体样式属性值的大小 if (attr=='opacity') {//如果属性是透明度,透明度的返回值是零点几的小数 icur=Math.round(parseFloat(getStyle(obj,attr))*100);//round函数避免透明度值在小数之间来回跳动 } else { icur=parseInt(getStyle(obj,attr)); } //2.算速度 var speed=(json[attr]-icur)/8;//分母为比例系数K,可调 speed=speed>0?Math.ceil(speed):Math.floor(speed);//缓冲速度要取整,不然移动不到终点就停止 //3.检测运动是否停止 if (icur==json[attr]) { clearInterval(obj.timer); if(fn){//上一个运动停止后判断一下是否还有下一个运动 fn(); } } else { if (attr=='opacity') { obj.style.filter='alpha(opacity:'+(icur+speed)+')';//IE浏览器 obj.style.opacity=(icur+speed)/100;//火狐浏览器 } else { obj.style[attr]=icur+speed+'px'; } } } },30) }
下面是一个div调用startMove函数达到宽高同时变化的效果:
<style type="text/css"> #div1{ width: 200px; height: 200px; background: red; border: 2px solid black; filter: alpha(opacity:30); opacity: 0.3; } </style>
<script type="text/javascript"> window.onload=function(){ var ob1=document.getElementById('div1'); ob1.onmouseover=function(){ startMove(ob1,{width:400,height:400});//json格式 } } </script>
可以再加一对透明度,实现宽、高、透明度同时变化:
<script type="text/javascript"> window.onload=function(){ var ob1=document.getElementById('div1'); ob1.onmouseover=function(){ startMove(ob1,{width:400,height:400,opacity:100}); } } </script>
本框架存在的问题:当我想要把宽变为201,高变为400,透明度变为100时,会出现一个问题:宽确实变成201,但是高和透明度还远远未达到目标值,运动就停止了。原因是17行的关闭定时器,原程序里只要有一个属性值达到目标值,就关闭定时器,并没有对每个属性是否达到目标值都做判断。所以出现了当宽达到了目标值,高和透明度还没有达到目标值的时候定时器就关闭了。解决办法:我们需要判断所有的属性都达到目标值时才关闭定时器。(第2行,第17行以后有改动)
function startMove(obj,json,fn) {//元素,改变的样式属性,达到的目标值,回调函数 var flag=true;//定义一个标杆,假设所有运动都达到了目标值 clearInterval(obj.timer); obj.timer=setInterval(function(){ for(var attr in json){ //1.取当前值 var icur=0;//icur返回物体样式属性值的大小 if (attr=='opacity') {//如果属性是透明度,透明度的返回值是零点几的小数 icur=Math.round(parseFloat(getStyle(obj,attr))*100);//round函数避免透明度值在小数之间来回跳动 } else { icur=parseInt(getStyle(obj,attr)); } //2.算速度 var speed=(json[attr]-icur)/8;//分母为比例系数K,可调 speed=speed>0?Math.ceil(speed):Math.floor(speed);//缓冲速度要取整,不然移动不到终点就停止 //3.检测运动是否停止 if (icur!=json[attr]) {//如果不是所有的运动都达到目标值 flag=false; } if (attr=='opacity') {//没达到目标值的继续运动 obj.style.filter='alpha(opacity:'+(icur+speed)+')';//IE浏览器 obj.style.opacity=(icur+speed)/100;//火狐浏览器 } else { obj.style[attr]=icur+speed+'px'; } if(flag){//如果所有的运动都达到了目标值,再关闭定时器,然后看看有没有链式运动 clearInterval(obj.timer); if(fn){ fn(); } } } },30) }
现在这个改动完的框架就是完美框架了,一些网站上常用的小动画就可以用这个框架实现。
以上就是js动画学习(五)的内容,更多相关内容请关注PHP中文网(www.php.cn)!