千万分之一one
2015-02-06 15:26
<!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>
<!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>
希望是您要的答案
JS动画效果
113925 学习 · 1443 问题
相似问题