<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{margin:0;padding:0}
ul li{list-style:none;}
ul li{width:200px;height:50px;margin: 20px 0; background:yellow;
filter: alpha:(opacity:30);opacity: 0.3;}
</style>
<script type="text/javascript">
window.onload=function(){
var x=document.getElementsByTagName("li");
for (var i = 0; i < x.length; i++)
{
x[i].timer=null;
x[i].onmouseover=function(){
startMove(this,"width",100,function(){
startMove(this,"height",500)
});
}
x[i].onmouseout=function(){
startMove(this,"height",50,function(){
startMove(this,"width",200);
});
}
}
}
function getStyle(obj,attr){
if (obj.currentStyle) {return obj.currentStyle[attr];}
else{return getComputedStyle(obj,false)[attr];}
}
function startMove(obj,attr,zd,fn){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var sxz=0;
if (attr=="opacity")
{
var sxz=Math.round(parseFloat(getStyle(obj,attr))*100);
}
else{
var sxz=parseInt(getStyle(obj,attr));
}
var speed=(zd-sxz)/10;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if (sxz==zd)
{ clearInterval(obj.timer);
if (fn) {fn()};
}
else{
if (attr=="opacity")
{
var alpha1=sxz+speed;
obj.style.filter="opacity:( alpha:alpha1)";
obj.style.opacity=alpha1/100;
}
else
{
obj.style[attr]=sxz+speed+"px";
}
}
},30)
}
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
ruibin
qq_J_13
相关分类