<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>多物体复杂动画(带透明度的)</title> <style type="text/css"> body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,tr,td {margin:0;padding:0; font-size:12px;} table {border-collapse:collapse;border-spacing:0;} fieldset,img {border:0} address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal} ol,ul {list-style:none} caption,th,td{text-align:center} h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal} q:before,q:after {content:''} abbr,acronym { border:0} .odiv{position:relative;} .odiv ul li{width:200px; height:100px; background:yellow; margin-bottom:20px; border:2px solid #000;} #li1{opacity:0.3;filter:alpha(opacity:30);} </style> </head> <body> <div> <ul> <li></li> <li></li> </ul> </div> </body> </html> <script language="javascript"> window.onload = function(){ var li1 = document.getElementById('li1'); var li2 = document.getElementById('li2'); li1.onmouseover = function(){ startMov(this,100,'opacity'); }; li1.onmouseout = function(){ startMov(this,30,'opacity'); }; li2.onmouseover = function(){ startMov(this,200,'height'); }; li2.onmouseout = function(){ startMov(this,100,'height'); } li1.timer = null; li2.timer = null; function startMov(obj,itarget,attr){ clearInterval(obj.timer);//执行动画之前清除动画 obj.timer = setInterval(function(){ var icur = 0; if(attr == 'opacity'){ icur = Math.round(parseFloat(getStyle(obj,attr))*100);//转换成整数,并且四舍五入下 //计算机在计算小数的时候往往是不准确的！ } else{ icur = parseInt(getStyle(obj,attr)); } var speed =0; speed = (itarget - icur)/8; speed = speed>0?Math.ceil(speed):Math.floor(speed); if(icur == itarget){ clearInterval(obj.timer); } else{ if(attr == 'opacity'){ obj.style.filter = 'alpha(opacity:'+(icur+speed)+')'; 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]; } else{ return getComputedStyle(obj,false)[attr]; } } } //offsetWidth获取的是元素实际的宽度（包括边框和内边距） //只要是多物体运动，所有的属性都不能共用 </script>
8、链式动画
说明：链式动画就是当前动画执行完成后执行下一个动画效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>链式动画</title> <style type="text/css"> body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,tr,td {margin:0;padding:0; font-size:12px;} table {border-collapse:collapse;border-spacing:0;} fieldset,img {border:0} address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal} ol,ul {list-style:none} caption,th,td{text-align:center} h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal} q:before,q:after {content:''} abbr,acronym { border:0} .odiv{position:relative;} .odiv ul li{width:200px; height:100px; background:yellow; margin-bottom:20px; border:2px solid #000;} #li1{opacity:0.3;filter:alpha(opacity:30);} </style> </head> <body> <div> <ul> <li></li> </ul> </div> </body> </html> <script language="javascript"> window.onload = function(){ var li1 = document.getElementById('li1'); li1.onmouseover = function(){ startMov(li1,400,'width',function(){ startMov(li1,200,'height',function(){ startMov(li1,100,'opacity'); }); }); }; li1.onmouseout = function(){ startMov(li1,30,'opacity',function(){ startMov(li1,100,'height',function(){ startMov(li1,100,'width'); }); }); }; li1.timer = null; function startMov(obj,itarget,attr,fn){//fn回调函数 clearInterval(obj.timer);//执行动画之前清除动画 obj.timer = setInterval(function(){ var icur = 0; if(attr == 'opacity'){ icur = Math.round(parseFloat(getStyle(obj,attr))*100);//转换成整数,并且四舍五入下 //计算机在计算小数的时候往往是不准确的！ } else{ icur = parseInt(getStyle(obj,attr)); } var speed =0; speed = (itarget - icur)/8; 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)+')'; 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]; } else{ return getComputedStyle(obj,false)[attr]; } } } //offsetWidth获取的是元素实际的宽度（包括边框和内边距） //只要是多物体运动，所有的属性都不能共用 </script>
9、多物体同时运动动画(支持链式动画)