妙味——图片淡入淡出

最新推荐文章于 2025-09-11 10:42:34 发布

weixin_30393907

最新推荐文章于 2025-09-11 10:42:34 发布

阅读量70

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml

原文链接：http://www.cnblogs.com/baixc/p/3477640.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
#img1{
    opacity: 0.3;
    filter: alpha(opacity=30);
    width: 400px;
    height: 400px;
}
</style>
<script>
window.onload=function(){
    var oImg = document.getElementById('img1');

    oImg.onmouseover=function(){
        startMove(100);
    };

    oImg.onmouseout=function(){
        startMove(30);
    };
};

var timer = null;
var alpha = 30;

function startMove(iTarget){
    var oImg = document.getElementById('img1');

    clearInterval(timer);
    timer=setInterval(function(){
        var iSpeed = 0;
        if(alpha<iTarget)
        {
            iSpeed=5;
        }
        else
        {
            iSpeed=-5;
        }

        if(alpha==iTarget)
        {
            clearInterval(timer);
        }
        else
        {
            alpha+=iSpeed;
            // document.title=alpha;
            oImg.style.opacity=alpha/100;
            oImg.style.filter='alpha:(opacity:'+alpha+')';
        }

    },30);
};
</script>
</head>
<body>
<img src="fade.jpg" alt="" id="img1" />
</body>
</html>