这个效果的实现和我的上一篇博客一样,主要还是应用setinterval(fun(),milltime); 其中fun() 是每隔milltime毫秒要执行的函数。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>透明度动画</title> </head> <style type="text/css"> *{ padding: 0; margin: 0; } #p1{ width: 200px; height: 200px; background-color: red; opacity: 0.3; filter: alpha(opacity=30); } </style> <body> <p id="p1"> </p> </body> <script type="text/javascript"> var p1 = document.getelementbyid("p1"); p1.onmouseover = function(){ startmove(100); } p1.onmouseout = function(){ startmove(30); } var timer = null; var alpha = 30; var startmove = function(itarget){ clearinterval(timer); var speed = 0; if(itarget > alpha){ speed = 5; }else { speed = -5; } timer = setinterval(function(){ if(alpha == itarget){ clearinterval(timer); }else { alpha += speed; p1.style.filter = 'alpha(opacity='+ alpha + ')'; p1.style.opacity = alpha/100; } },30); } </script> </html>
如对本文有疑问, 点击进行留言回复!!
offset、client、scroll (width,height、left,top、X,Y)
网友评论