<!doctype html> <html> <head> <meta charset="UTF-8"> <title>利用-json-同步-运动</title> <style> *{ margin:0; padding:0;} #d{ width:220px; height:150px; float:left; margin-top:100px; position:absolute; left:0px; } div{ width:600px; height:650px; } div ul{ width:600px; height:650px; background-color:#CCC;} div ul li{ width:300px; height:200px; margin:10px 0 10px 0; background-color:#C93; border:1px solid #000; filter:alpha(opacity=30); opacity:0.3;} </style> </head> <body> <div> <ul id="uly"> <li></li> <li></li> <li></li> </ul> </div> <script> var d=document.getElementById("uly"); var ali=d.getElementsByTagName("li"); for(var i=0;i<ali.length;i++){ ali[i].time=null; ali[i].num; ali[i].onmouseover=function(){dover(this,{width:350,height:300,opacity:100});} ali[i].onmouseout=function(){dout(this,{width:300,height:200,opacity:30});} } //鼠标进入事件 function dover(obj,json,fn){ clearInterval(obj.time); obj.time=setInterval(function(){mov(obj,json,fn)},1); } //鼠标移出事件 function dout(obj,json,fn){ clearInterval(obj.time); obj.time=setInterval(function(){mov(obj,json,fn)},1); } //进行 运动的处理函数 attr 是样式的属性 通过传入参数 可以让 宽 高 的改变 调用同一个函数 function mov(obj,json,fn){ for(var i in json){ if(i=="opacity"){ obj.num=Math.round(parseFloat(getStyle(obj,i))*100); }else{ obj.num=parseInt(getStyle(obj,i));} if(Math.abs(json[i]-obj.num)<1){ var flag=false;}//不能理解 json[i]-obj.num)<1 是到达目标值 为什么是 false var v=(json[i]-obj.num)/20; v=v>0?Math.ceil(v):Math.floor(v); if(i=="opacity"){ obj.num=obj.num+v; obj.style.filter="alpha(opacity:"+obj.num+")"; obj.style.opacity=obj.num/100; }else{ obj.num=obj.num+v; obj.style[i]=obj.num+"px";} if(flag){clearInterval(obj.time); //判断 是否 所有的运动 都达到目标值 if(fn){fn();}else{};} /*if(Math.abs(json[i]-obj.num)<1){ clearInterval(obj.time); //当上一个运动 结束时 开始下一个运动 叫 链式运动 if(fn){fn();}else{}; }else{ var v=(json[i]-obj.num)/20; v=v>0?Math.ceil(v):Math.floor(v); if(i=="opacity"){ obj.num=obj.num+v; obj.style.filter="alpha(opacity:"+obj.num+")"; obj.style.opacity=obj.num/100; }else{ obj.num=obj.num+v; obj.style[i]=obj.num+"px";} }*/ } } //获取行内样式 如 不含边框的 宽度 高度 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr];} } </script> </body> </html>
我觉得 应该是这样 不知道对不对...
判断 当有一个满足条件时 flag 为false 当 所有条件 都不满足时 flag 为true