<!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>js淡入淡出的图片</title> <style> #img{display:block;margin:0 auto; opacity:0.3; filter:alpha(opacity=30); width:200px; height:300px;} </style> <script> window.onload=function(){ var oImg=document.getElementById('img'); var iTimer=0; oImg.onmouseover=function(){ startMove(this,100,10); } oImg.onmouseout=function(){ startMove(this,30,-10); } function startMove(obj, iTarget, iSpeed) { clearInterval(iTimer); var iCur=0; iTimer = setInterval(function() { iCur=Math.round(css(obj,'opacity')*100); if (iCur == iTarget) { clearInterval(iTimer); } else { obj.style.opacity=(iCur+iSpeed)/100; obj.style.filter='alpha(opacity='+(iCur+iSpeed)+')'; //加括号防止转换成字符串 } }, 30); } function css(obj,attr){ //获取元素的css任何属性 if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }} </script> </head> <body> <img src='cat.jpg' id='img'/> </body> </html>
