<!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"> *{margin: 0;padding: 0;} ul,li{list-style: none;} ul li{ width: 200px; height: 100px; background: yellow; filter: alpha(opacity:30); opacity: 0.3; margin:20px; } </style> <script type="text/javascript"> function Move(obj,iTarget,attr,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=(iTarget-icur)/5; 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); } window.onload=function(){ var ali=document.getElementsByTagName('li'); ali[0].onmouseover=function(){ Move(this,100,'opacity',function(){ Move(ali[0],300,'width',function(){ Move(ali[0],200,'height');});}) }//bug 360极速浏览器宽度只有296 ali[0].onmouseout=function(){ Move(this,30,'opacity'); } ali[1].onmouseover=function(){ var othis=this; Move(othis,300,'width',function(){ Move(othis,200,'height');}); }//后面不能用this,但可以提前提取出来 ali[1].onmouseout=function(){ Move(this,200,'width',function(){ Move(othis,100,'height');}); } } function getStyle(obj, attr) { if(obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; } } </script> </head> <body> <ul> <li></li> <li></li> <li></li> </ul> </body> </html>
OlderSkee
相关分类