<head>
<title>链式运动</title>
<style>
li{
width:200px;
height:100px;
background:red;
float: none;
left:0;
top: 0;
margin-bottom: 20px;
list-style-type: none;
filter: alpha(opacity:30);
opacity: 0.3;
}
</style>
<script type="text/javascript">
var oli=document.getElementsByTagName('li');
window.onload=function(){
for(i=0;i<oli.length;i++){
oli[i].timer=null;
oli[i].onmouseover=function(){
startmove(this,"width",400,function(){
startmove(this,"opacity",100); });
}
oli[i].onmouseout=function(){
startmove(this,"width",200,function(){
startmove(this,"opacity",30); }); }
}}
function getamt(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr]; }
}
function startmove(obj,attr,itarget,fn){
clearInterval(obj.timer);
obj.timer=setInterval( function(){
var dqz=0;
if(attr=="opacity"){
dqz=Math.round(parseFloat(getamt(obj,attr))*100);
}else{
dqz=parseInt(getamt(obj,attr));
}
var speed=(itarget-dqz)/10;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(dqz == itarget){
clearInterval(obj.timer);
if(fn){ fn(); }
} else{
if (attr=="opacity") {obj.style.filter="alpha(opacity:"+(dqz+speed)+")";
obj.style.opacity=(dqz+speed)/100;}
else{obj.style[attr]=dqz+speed+"px";}
} },30);
}
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
</ul>
</body>
一毛钱
小寒丶