Frontend practice-JavaScript-animation (2)
Transparency Animation
Effect: when the image is moved several times. The image has a gradient effect. When the mouse leaves, the original image is restored.
Answer:
Transparency Animation Script window. onload = function () {var oDiv = document. getElementById ('p1'); oDiv. onmouseover = function () {startMove (100);} oDiv. onmouseout = function () {startMove (30) ;}} var timer = null; var alpha = 30; function startMove (iTarget) {var oDiv = document. getElementById ('p1'); 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
The above is the content of the front-end practice-JavaScript-animation (2). For more information, see PHP Chinese website (www.php1.cn )!