<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ani</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
ul{
list-style: none;
}
ul li{
height:200px;
width:200px;
border:4px solid #233;
margin-bottom:20px;
background: yellow;
}
#list2{
filter: alpha(opacity:30);
opacity: 0.3;
}
</style>
<script>
window.onload=function(){
//var list=document.getElementsByTagName("li");
var list0=document.getElementById("list0");
var list1=document.getElementById("list1");
var list2=document.getElementById("list2");
var list3=document.getElementById("list3");
var list4=document.getElementById("list4");
/*for(var i=0;i<list.length;i++){
list[i].timer=null;
list[i].=function(){
startmove(this,400);
}
list[i].onmouseout=function(){
startmove(this,200);
}
} */
list0.onmouseover=function(){
startmove(this,"height",400);}
list0.onmouseout=function(){
startmove(this,"height",200);}
list1.onmouseover=function(){
startmove(this,"width",400);}
list1.onmouseout=function(){
startmove(this,"width",200);}
list2.onmouseover=function(){
startmove(this,"opacity",100);}
list2.onmouseout=function(){
startmove(this,"opacity",30);}
list3.onmouseover=function(){
startmove(list3,"height",400,function(){
startmove(list3,"width",400,function(){
startmove(list3,"opacity",30);
});
});}
list3.onmouseout=function(){
startmove(list3,"opacity",100,function(){
startmove(list3,"width",200,function(){
startmove(list3,"height",200);
});
});}
list4.onmouseover=function(){
startmove1(this,{height :400,width :400,opacity:30});}
list4.onmouseout=function(){
startmove1(this,{height :200,width :200,opacity:100});}
function startmove1(obj,json,fn){
var flag=true;
clearInterval(obj.timer);
obj.timer=setInterval(function(){
for(var i in json){
if(i=="opacity"){
var curr=Math.round(parseFloat(getStyle(obj,i))*100);
alert(curr);
}
else{
var curr=parseInt(getStyle(obj,i));}
var speed=(json[i]-curr)/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(curr!=json[i]){
flag=false;}
if(i=="opacity"){
obj.style.filter="alpha(opacity:"+(curr+speed)+")";
obj.style.opacity=(curr+speed)/100;
}
else{
obj.style[i]=curr+speed+"px";}
if(flag){
clearInterval(obj.timer);
}
if(fn){
fn();
}
}
},30);
}
function startmove(obj,arr,iTarge,fn){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
if(arr=="opacity"){
var curr=Math.round(parseFloat(getStyle(obj,arr))*100);
alert(curr);
}
else{
var curr=parseInt(getStyle(obj,arr));}
var speed=(iTarge-curr)/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(curr==iTarge){
clearInterval(obj.timer);
if(fn){
fn();
}
}
else{
if(arr=="opacity"){
obj.style.filter="alpha(opacity:"+(curr+speed)+")";
obj.style.opacity=(curr+speed)/100;
}
else{
obj.style[arr]=curr+speed+"px";}
}
},30);
}
function getStyle(obj,arr){
if(obj.currentStyle){
//alert(obj.currentStyle[arr]);
return obj.currentStyle[arr];
}
else{
return getComputedStyle(obj,false)[arr];
}
}
}
</script>
</head>
<body>
<div><ul>
<li id="list0"></li>
<li id="list1"></li>
<li id="list2"></li>
<li id="list3"></li>
<li id="list4"></li>
</ul></div>
</body>
</html>
五个li前三个都是只改变高、宽、透明度中的其中一个。第四个是链式动画，当鼠标移入的时候先改变高度再改变宽度，最后再改变透明度；当鼠标移出的时候反序恢复，先恢复透明度与，再恢复宽度最后恢复高度。最后一个li是同时运动，使得元素的高宽和透明度同时发生改变。为了实现同时改变引用了json。
json的格式是{a:b，c:d......}a和c代表元素，相当于object，b 和d代表数值，相当于iTarget。通过对json的for-in循环实现元素的同时运动。
json 的for-in循环的格式是for(var i in json){.....}其中i指的是 元素名，json[i]代表元素名对应的数值。
对于已经可以实现高宽运动的startmove函数，为了让元素通过startmove同时实现对透明度的改变需要对元素名进行判断，如果是opacity就特殊处理，否则正常处理。
对于元素的链式动画，需要对startmove的形参中多添加一个代表函数的形参。然后在清除定时器之前判断，如果有此实参传入就先清除定时器然后执行此函数。
对于元素的同时运动，将要同时执行的要求放入json中，然后通过for循环执行运动。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>ani</title><style type="text/css">*{margin:0px;padding:0px;}ul{list-style: none; }ul li{height:200px;width:200px; border:4px solid #233;margin-bottom:20px;background: yellow;}#list2{filter: alpha(opacity:30);opacity: 0.3;}</style><script>window.onload=function(){//var list=document.getElementsByTagName("li"); var list0=document.getElementById("list0"); var list1=document.getElementById("list1"); var list2=document.getElementById("list2"); var list3=document.getElementById("list3"); var list4=document.getElementById("list4");/*for(var i=0;i<list.length;i++){ list[i].timer=null;list[i].=function(){startmove(this,400);}list[i].onmouseout=function(){startmove(this,200);}}*/ list0.onmouseover=function(){ startmove(this,"height",400);} list0.onmouseout=function(){ startmove(this,"height",200);} list1.onmouseover=function(){ startmove(this,"width",400);} list1.onmouseout=function(){ startmove(this,"width",200);} list2.onmouseover=function(){ startmove(this,"opacity",100);} list2.onmouseout=function(){ startmove(this,"opacity",30);} list3.onmouseover=function(){ startmove(list3,"height",400,function(){ startmove(list3,"width",400,function(){ startmove(list3,"opacity",30); }); });} list3.onmouseout=function(){ startmove(list3,"opacity",100,function(){ startmove(list3,"width",200,function(){ startmove(list3,"height",200); }); });} list4.onmouseover=function(){ startmove1(this,{height :400,width :400,opacity:30});} list4.onmouseout=function(){ startmove1(this,{height :200,width :200,opacity:100});}function startmove1(obj,json,fn){var flag=true; clearInterval(obj.timer); obj.timer=setInterval(function(){ for(var i in json){ if(i=="opacity"){ var curr=Math.round(parseFloat(getStyle(obj,i))*100); alert(curr); } else{ var curr=parseInt(getStyle(obj,i));} var speed=(json[i]-curr)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(curr!=json[i]){ flag=false;} if(i=="opacity"){ obj.style.filter="alpha(opacity:"+(curr+speed)+")"; obj.style.opacity=(curr+speed)/100; } else{ obj.style[i]=curr+speed+"px";} if(flag){ clearInterval(obj.timer); } if(fn){ fn(); }} },30); } function startmove(obj,arr,iTarge,fn){ clearInterval(obj.timer); obj.timer=setInterval(function(){ if(arr=="opacity"){ var curr=Math.round(parseFloat(getStyle(obj,arr))*100); alert(curr); } else{ var curr=parseInt(getStyle(obj,arr));} var speed=(iTarge-curr)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(curr==iTarge){ clearInterval(obj.timer); if(fn){ fn(); } } else{ if(arr=="opacity"){ obj.style.filter="alpha(opacity:"+(curr+speed)+")"; obj.style.opacity=(curr+speed)/100; } else{ obj.style[arr]=curr+speed+"px";} } },30); } function getStyle(obj,arr){ if(obj.currentStyle){ //alert(obj.currentStyle[arr]); return obj.currentStyle[arr]; } else{ return getComputedStyle(obj,false)[arr]; } }}</script></head><body><div><ul><li id="list0"></li><li id="list1"></li><li id="list2"></li><li id="list3"></li><li id="list4"></li></ul></div></body></html>