时间:2021-07-01 10:21:17 帮助过:4人阅读
透明度动画
实现效果:当数遍移动到图片上时。图片发生渐变效果;当鼠标离开时,恢复原图效果。
解答:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>透明度动画</title> <style type="text/css"> *{ margin:0; padding:0; } #div1{ width:200px; height:200px; background:red; filter:alpha(opacity:30); opacity:0.3; } </style> <script> window.onload = function(){ var oDiv = document.getElementById('div1'); oDiv.onmouseover = function(){ startMove(100); } oDiv.onmouseout = function(){ startMove(30); } } var timer = null; var alpha = 30; function startMove(iTarget){ var oDiv = document.getElementById('div1'); clearInterval(timer); timer = setInterval(function(){ var speed = 0; if(alpha > iTarget){ speed = -10; }else{ speed = 10; } if(alpha == iTarget){ clearInterval(timer); }else{ alpha = alpha + speed; oDiv.style.filter = 'alpha(opacity:'+alpha+')'; oDiv.style.opacity = alpha/100; } },30) } </script> </head> <body> <div id="div1"></div> </body> </html>
以上就是前端实践--JavaScript--动画(二)的内容,更多相关内容请关注PHP中文网(www.gxlcms.com)!