首页 > 代码库 > js笔记----(运动)淡入淡出

js笔记----(运动)淡入淡出

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title>    <style>        #img1 { height:300px; width:300px; margin:30px auto; filter:alpha(opacity=30); opacity:0.3; }    </style>    <script type="text/javascript">        window.onload = function () {            var oImg = document.getElementById(img1);            oImg.onmouseover = function () {                StarMove(100);            }            oImg.onmouseout = function () {                StarMove(30);            }        }        var timer = null;        var alpha = 30;        function StarMove(iTarget)        {            var oImg = document.getElementById(img1);            var iSpeed = 0;            if (alpha < iTarget) {                iSpeed = 5;            }            else {                iSpeed = -5;            }            clearInterval(timer);            timer = setInterval(function () {                alpha += iSpeed;                if (alpha == iTarget) {                    clearInterval(timer);                }                else {                    oImg.style.filter = "alpha(opacity=" + alpha + ")";                    oImg.style.opacity = alpha / 100;                }            }, 30);        }    </script></head><body>    <img id="img1" src=http://www.mamicode.com/"images/02.jpg" alt="" /></body></html>

 

js笔记----(运动)淡入淡出