<!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.onload=function()
{
var oImg=document.getElementById('img1');
oImg.onmouseover=function(){
startMove(100);
};
oImg.onmouseout=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);