<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>图片的逐渐显示与消失</title>
        <style type="text/css">
            img {
                opacity: 0.6;
                filter: alpha(opacity=60);
            }
        </style>
    </head>
    <script type="text/javascript">
        window.onload = function() {
            var oImg = document.getElementById("img1");
            var oBtnChange2=document.getElementById("btnChange2");
            var oBtnChange = document.getElementById("btnChange");
            var iAlpha = 60;//用来定义默认的图片的透明度

            oBtnChange.onclick=function(){//逐渐显示
                iAlpha=0;
                oImg.style.opacity=0;//设置透明度
                oImg.style.filter='alpha(opacity=0)';//设置透明度 IE
                changeOpacity(oImg,100);

            };
             oBtnChange2.onclick = function() {//逐渐消失
                iAlpha=100;
                oImg.style.opacity=1;//设置透明度
                oImg.style.filter='alpha(opacity=100)';//设置透明度 IE
                changeOpacity(oImg, 0);
            };
            var oTimer = null;
            //定时器
            function changeOpacity(obj, iTarget) {
                clearInterval(oTimer);
                //关闭定时器
                var iSpeed = 0;
                //速度
                if (iAlpha < iTarget) {
                    iSpeed = 10;
                } else {
                    iSpeed = -10;
                };
                oTimer = setInterval(function() {
                    if (iAlpha == iTarget) {
                        clearInterval(oTimer);
                    } else {
                        iAlpha += iSpeed;
                        //设置透明度
                        obj.style.opacity = iAlpha / 100;
                        obj.style.filter = "alpha(opacity=" + iAlpha + ")";
                    };
                }, 1000);

            }

        };
    </script>
    <body>
        <img src="tadu1.jpg" id="img1" alt="塔读" />
        <input type="button" id="btnChange" value="图片逐渐显示" />
        <input type="button" id="btnChange2" value="图片逐渐消失" />
    </body>
</html>