我的想法是这样的，（1）当我鼠标点击的时候，透明度变深的同时宽度也增加；
（2） 当我鼠标离开的时候，透明度恢复默认数值的同时宽度也倒回原始；
目前实现了（1），但鼠标离开的时候透明度不会回到原始值；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin:0px;padding:0px;}
li{list-style:none;}
li{
width:200px;
height:200px;
background:red;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
margin:10px 10px 0 10px;
filter:alpha(opacity:30);
opacity:0.3;
</style>
<script type="text/javascript" >
window.onload=function(){
var oli=document.getElementsByTagName("li");
for(var i=0;i<oli.length;i++){
oli[i].onmouseover=function(){
startM(this,420,100);
}
oli[i].onmouseout=function(){
startM(this,210,30);
}
}
}
var timer;
var sudu=8;
var alpha=30;
function startM(obj,it,itm){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var tmsd=0;
if(alpha>obj.itm){tmsd=-10}else{tmsd=10;}
if(alpha==obj.itm){clearInterval(obj.timer);}
else{alpha+=tmsd;
obj.style.opacity=alpha/100;
obj.style.filter="alpha(opacity:'+alpha+')";
}
var speed=(it-obj.offsetWidth)/sudu;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(it==obj.offsetWidth){
clearInterval(obj.timer);
}
else{obj.style.width=obj.offsetWidth+speed+"px";}
},30);
}
</script>
</head>
<body>
<ul id="ul1">
<li>
</li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
