<!Doctype html> <html> <head> <style> div{200px;height:200px;background:red;margin:30px;float:left;border:3px solid #fff;font-size:20px;filter:alpha(opacity:30);opacity:0.3} </style> <script> /** *获取属性 **/ function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; }else{ return getComputedStyle(obj,false)[name] } } window.onload=function(){ var oDiv = document.getElementsByTagName("div")[0]; oDiv.timer = null; oDiv.onmouseover = function(){
//只需传属性名称 startMove(this,100,'opacity');
} oDiv.onmouseout = function(){ startMove(this,30,'opacity'); } } function startMove(obj,iTarget,name){ clearInterval(obj.timer); obj.timer = setInterval(function(){ //获取属性的值 var value =0; if(name == 'opacity'){ value = Math.round(parseFloat(getStyle(obj,name))*100); }else{ value = parseInt(getStyle(obj,name)); } speed = (iTarget - value)/6; speed = speed>0 ? Math.ceil(speed):Math.floor(speed); if(Math.abs(iTarget - value)<6){ clearInterval(obj.timer); if(name=='opacity'){ obj.style.filter = "alpha(opacity:"+iTarget+")"; obj.style.opacity = iTarget/100; }else{ obj.style[name] = iTarget; } }else{ if(name == 'opacity'){ obj.style.filter = "alpha(opacity:"+(value+speed)+")"; obj.style.opacity = (value+speed)/100; }else{ obj.style[name] = value+speed+"px"; } } },30) } </script> </head> <body> <div>我变</div> </body> </html>
