<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>运动</title>
<style type="text/css">
#box{
width: 200px;
height: 200px;
opacity: 0.2;
background: red;
margin: 20px auto;
}
</style>
<script type="text/javascript">
window.onload=function(){
var obox = document.getElementById('box');
obox.onmouseover=function(){
move(0.1,1);
}
obox.onmouseout=function(){
move(-0.1,0.2);
}
}
var timer=null;
function move(a,targat){
clearInterval(timer);
var obox = document.getElementById('box'),
a,
targat;
var b=0.2;
timer=setInterval(function(){
if(b==targat){
clearInterval(timer);
}
else{
b=b+a;
obox.style.opacity=b;
}
},30)
}
</script>
</head>
<body>
<div id='box'></div>
</body>
</html>
