Heim > Artikel > Web-Frontend > Front-End-Praxis – JavaScript – Animation (2)
Transparenzanimation
Um den Effekt zu erzielen: bei mehrmaliger Bewegung auf das Bild. Das Bild hat einen Verlaufseffekt; wenn die Maus es verlässt, wird der ursprüngliche Bildeffekt wiederhergestellt.
Antwort:
<!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>
Das Obige ist der Inhalt der Front-End-Übung – JavaScript – Animation (2). Bitte achten Sie auf PHP Chinese Net (www.php.cn)!