套路和分享到的思路差不多:http://taobao.fm/archives/835

代码如下;

 

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#div1{width: 200px;height: 200px;background: red;opacity: 0.3;filter:alpha(opacity=30);position: absolute;
left: 0;top:50px;}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById("div1");
oDiv.onmouseover=function(){
startMove(100)
};
oDiv.onmouseout=function(){
startMove(30)
};
};

var timer=null;
var toumingdu=30;//因为透明度不好去,我们定义一个变量值,用他来控制不透明度;因为出事的不透明度是30,所以等于30;
function startMove(iTarget){
var oDiv=document.getElementById("div1");
var speed=0;
if(toumingdu<iTarget){
speed=10;
}else{
speed=-10;
}

clearInterval(timer);
timer=setInterval(function(){
if(toumingdu==iTarget){
clearInterval(timer);//toumingdu==iTarget 这个是判断等于一定不能写成=。否则就歇菜了;
}else{
toumingdu+=speed;
oDiv.style.filter="alpha(opacity=toumingdu)";
oDiv.style.opacity=toumingdu/100;
}
},30)
}
</script>
</head>
<body>
<div id="div1" ></div>
</body>
</html>

········