<!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>
</head>
<script>
window.onload=function(){
var ali=document.getElementsByTagName('li');
for(var i=0;i<ali.length;i++)
{
ali[i].alpha=30;
ali[i].time=null;
ali[i].onmouseover=function(){var g=this;startmove(g,'width',200,function(){startmove(g,'opacity',100)});}
ali[i].onmouseout=function(){var g=this;startmove(g,'opacity',30,function(){startmove(g,'width',100)});}
}
//var alpha=30;
function getStyle(obj,attr){
if(obj.currentStyle)
return obj.currentStyle[attr];
else{
return getComputedStyle(obj,false)[attr];
}
}
function startmove(obj,attr,target,fn){
clearInterval(obj.time);
obj.time=setInterval(function(){
var icon=0;
if(attr=='opacity'){
icon=Math.round(parseFloat(getStyle(obj,attr))*100);
}
else
{
icon=parseInt(getStyle(obj,attr));
}
var speed=(target-icon)/10;
speed>0?Math.ceil(speed):Math.floor(speed);
if(icon==target)
{
clearInterval(obj.time);
if(fn)
{fn();}
}
else{
if(attr=='opacity')
{
obj.alpha+=speed;
obj.style.filter='alpha(opacity:'+icon+speed+')';
obj.style.opacity=(icon+speed)/100;}
else
obj.style[attr]=icon+speed+'px';
}
},30)
}
}
</script>
<style>
li{width:100px;height:100px;list-style:none;margin:10px;background-color:#F00;filter:alpha(opacity:30);opacity:0.3;}
</style>
<body>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
