多物体链式运动

来源：互联网发布：c语言基础知识大全编辑：程序博客网时间：2024/04/30 14:25
<!DOCTYPE html><html><head><title>NBodyMove test</title><style type="text/css">*{margin:20px 0px 0px;padding :0px;}li{width: 200px;height: 100px;background-color: red;list-style-type: none;border: 4px solid #000;filter: alpha(opacity:30);opacity: 0.3;}</style><script type="text/javascript">window.onload=function(){var list=document.getElementsByTagName('li');     //        list.onmouseover=function(){     //        startmove(list,'width',400,function(){ // startmove(list,'height',200);// });     //        }for(var i=0;i<list.length;i++){//list[i].alpha=30;//控制每个li的初始透明度list[i].timer=null;list[i].onmouseover=function(){var that=this;//注意，要在回调函数中用别的，用this不管用startmove(this,'width',400,function(){startmove(that,'height',200);});}list[i].onmouseout=function(){var that=this;startmove(this,'width',200,function(){startmove(that,'height',100);});}}  }//var alpha=30;一般不会用公共的变量//var timer=null;function startmove(obj,attr,iTarget,fn){clearInterval(obj.timer);obj.timer=setInterval(function(){//判断改变值var icur=0;if(attr=='opacity'){icur=Math.round(parseFloat(getStyle(obj,attr))*100);//float出来的是小于1的小数，所以*100//Math.round去1.00055555的尾巴}else{icur=parseInt(getStyle(obj,attr));}//计算速度var speed=(iTarget-icur)/10;                speed=speed>0?Math.ceil(speed):Math.floor(speed);                //运动                if(icur ==iTarget){                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);}function getStyle(obj,attr){if(obj.currentStyle){return obj.currentStyle[attr];//IE浏览器}else{return getComputedStyle(obj,false)[attr];//针对火狐浏览器}}</script></head><body><ul><li></li><li></li></ul></body></html>
0 0
多物体 链式运动

多物体链式运动
