<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>动画效果</title>
</head>
<style type="text/css">
.odiv{width:200px;height: 100px;background: green;margin-top:20px;border: 5px solid blue;filter:alpha(opacity：30);opacity: 0.3;}
</style>
<body>
<div class="odiv" id="odiv"></div>
<div class="odiv" id="odiv2"></div>
<div class="odiv" id="odiv3"></div>
</body>
<script type="text/javascript">
window.onload=function(){
var div=document.getElementById('odiv');
var divs=document.getElementsByTagName('div');
for(var i=0;i<divs.length;i++){
divs[i].timer=null;
divs[i].onmouseover=function(){
move(divs[0],{'opacity':100,'width':400},function(){
move(divs[0],{'height':300,'width':600})
})
}
divs[i].onmouseout=function(){
move(divs[0],{'opacity':30,'width':200},function(){
move(divs[0],{'height':100,'width':200})
});
}
}
function move(obj,json,fn){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var flag=true;
for(var attr in json){
var icr=0;
if(attr=='opacity'){
icr=Math.round(parseFloat(getstyle(obj,attr))*100);
}else{
icr=parseInt(getstyle(obj,attr));
}
var sped=(json[attr]-icr)/8;
sped=sped>0 ? Math.ceil(sped):Math.floor(sped);
if(icr!=json[attr]){
flag=false;
}
if(attr=='opacity'){
obj.style.filter='alpha(opacity:'+(icr+sped)+')';
obj.style.opacity=(icr+sped)/100;
}
else{
obj.style[attr]=icr+sped+'px';
}
}
if(flag){
clearInterval(obj.timer);
if(fn){
fn();
}
}
},30);
}
//获取不带边框的高
function getstyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
}
</script>
</html>
