<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>速度動畫效果</title>
<style?type="text/css">
???*{
???margin:0px;
???padding:?0px;
???}
???#hide{
???height:?200px;
???width:?200px;
???background-color:?red;
???filter:alpha(opacity=30);
???opacity:?0.3;
???}
???
</style>
</head>
<body>
<div?id="hide">
</div>
<script?type="text/javascript">
var?hideDiv=document.getElementById('hide');
window.onload=function(){
hideDiv.onmousever=function(){
????startMove(100);
}
hideDiv.onmouseout=function(){
????startMove(30);
}
var?timer=null;
var?alphaa=30;
function?startMove(iTarget)?{
var?hideDiv=document.getElementById('hideDiv');
clearInterval(timer);
timer=setInterval(function(){
var?speed=0;
if?(alphaa>iTarget)?{
speed=-10;
}
else{
speed=10;
}
if?(alphaa==iTarget)?{
??clearInterval(timer);
}
else{
alphaa+=speed;
hideDiv.style.filter="alpha(opacity："+alphaa+")";
hideDiv.style.opacity=alphaa/100;
}
},30)
}
}
</script>
</body>
</html>
2015-02-12
<!DOCTYPE?html> <html> <head> <meta?charset="UTF-8"> <title>速度動畫效果</title> <style?type="text/css"> ???*{ ???margin:0px; ???padding:?0px; ???} ???#hide{ ???height:?200px; ???width:?200px; ???background-color:?red; ???filter:alpha(opacity=30); ???opacity:?0.3; ???} ???? </style> </head> <body> <div?id="hide"> </div> <script?type="text/javascript"> var?hideDiv=document.getElementById('hide'); window.onload=function(){ hideDiv.onmouseover?=function(){ ????startMove(100); } hideDiv.onmouseout=function(){ ????startMove(30); } ? var?timer=null; var?alphaa=30; function?startMove(iTarget)?{ var?hideDiv=document.getElementById('hide'); clearInterval(timer); timer=setInterval(function(){ var?speed=0; if?(alphaa>iTarget)?{ speed=-10; } else{ speed=10; } if?(alphaa==iTarget)?{ ??clearInterval(timer); } else{ alphaa+=speed; hideDiv.style.filter="alpha(opacity："+alphaa+")"; hideDiv.style.opacity=alphaa/100; } },30) } } </script> </body> </html>希望是您要的答案