<!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>无标题文档</title>
<style>
*{margin:0; padding:0;}
div ul li{
margin-bottom:20px;
width:200px;height:50px;
background-color:#FF0;
border:1px solid black;
opacity:0.3;
filter:alpha(opacity:30);
list-style-type:none;
}
</style>
<script>
window.onload=function(){
var li=document.getElementsByTagName('li');
for(var i=0; i<li.length; i++){
li[i].onmouseover=function(){
var _this=this;
//利用json将属性和值两项合在一起
move(_this,{"width":"400","height":"100"},function(){
move(_this,{"opacity":"100"});
});
}
/*调用的函数有3个参数，this表示object即当前所选对象，json为所选属性要达到的目标值，fu（）表示链接动作。*/
li[i].onmouseout=function(){
var _this=this;
move(_this,{"width":"200","height":"50"},function(){
move(_this,{"opacity":"30"});
});
}
}
//通过getstyle解决边框BUG，并考虑兼容性
function getStyle(obj,attr){
if(obj.currenStyle){
return obj.currenStyle[attr];
}
else{
return getComputedStyle(obj,false)[attr];
}
}
function move(obj,json,fn){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
//第一步取当前值
for(var attr in json){
var iCur=0;
if(attr=='opacity'){
/*如果当前值为透明度（无单位，并且为小数），需要用parseFloat去小数，再用Math.round四舍五入取整来修正BUG*/
iCur=Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
iCur=parseInt(getStyle(obj,attr));
}
//第二步 求速度
var speed=(json[attr]-iCur)/10;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
//第三步 运动过程
if(iCur!=json[attr]){
//如果不是所有目前值达到目标值，标签不成立，继续进行运动
flag=false;
}
if(attr=='opacity'){
//透明度无单位px，所以单独列出并考虑兼容
obj.style.filter='alpha(opacity:'+(iCur+speed)+')';
obj.style.opacity=(iCur+speed)/100;
}else{
obj.style[attr]=iCur+speed+'px';
}
if(flag){
clearInterval(obj.timer);
if(fn){
fn();
}
}
}//json
},30);
}
}
</script>
</head>
<body>
<div id='x'>
<ul>
<li id='a'></li>
<li id='b'></li>
</ul>
</div>
</body>
</html>
