<!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><style>#img1 {filter:alpha(opacity:30); opacity:0.3;}</style><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script type="application/javascript">window.οnlοad=function(){ var oImg=document.getElementById('img1'); oImg.οnmοuseοver=function(){ startMove(100); }; oImg.οnmοuseοut=function(){ startMove(30); }; };var timer=null;var alpha=30;//透明度的初始值function startMove(iTarget){ var oImg=document.getElementById('img1'); clearInterval(timer);//第二次点击速度会叠加,因此在第二次点击之前关闭定时器 timer=setInterval(function() { var iSpeed=0; if(alpha<iTarget) { iSpeed=1; }else { iSpeed=-1; } if(alpha==iTarget)//这样写是因为定时器清了,仅仅是下次不再执行,但这此还是会执行.iTarget范围在0-255之间 { clearInterval(timer); }else{ alpha+=iSpeed; oImg.style.filter='alpha(opacity:'+alpha+')';//设置IE的透明度 oImg.style.opacity=alpha/100;//设置其他浏览器的透明度,透明度是小数 //document.title=alpha; } },30);};</script></head><body>
<img id="img1" src="Desert.jpg" /></body></html>补充:
CSS设置 IE使用滤镜filter的alpha属性,其他浏览器直接使用opacity属性设置透明度;
IE:filter:alpha(opacity:30);
firefox: opacity(0.3);