js实现图片淡入淡出

最新推荐文章于 2023-05-27 17:05:06 发布

sweetllh

最新推荐文章于 2023-05-27 17:05:06 发布

阅读量2.6k

点赞数 3

分类专栏：运动 javascript

本文链接：https://blog.csdn.net/sweetllh/article/details/70765523

版权

javascript 同时被 2 个专栏收录

73 篇文章 3 订阅

订阅专栏

运动

7 篇文章 0 订阅

订阅专栏

效果：鼠标移入时，图片由半透明逐渐变成清晰，移出时，由清晰变为半透明

分析：用变量来储存透明度，因为元素.style.alpha不能直接增加或减少

代码中另附有一个设置元素透明度的方法, 是按IE规则(0~100)设置, 若改成标准设置方法(0.00~1.00)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            body{
                margin: 100px;
            }

            img{
                display: block;
                width: 640px;
                height: 350px;
                opacity:30;
                filter: alpha(opacity:30);
            }
        </style>
    </head>
    <body>
            <img src="img/4.jpg" alt="" />
    </body>
    <script type="text/javascript">
        (function(){
            var oImg = document.querySelector('img');
            var alpha = 30;
            oImg.onmouseover = function(){show(100,5) ;}
            oImg.onmouseout = function(){show(30,-5); }
            var handler = null;

            function show(target,speed){
                clearInterval(handler);
                handler = setInterval(function(){
                    if(alpha == target){
                        clearInterval(handler);
                    }
                    else {
                        alpha+=speed;
                        oImg.style.opacity = alpha/100;
                        oImg.style.filter = 'alpha(opacity:' + alpha +')';
                    }

                },60)
            }

        })()
    </script>
</html>

sweetllh

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js实现图片淡入淡出

效果：鼠标移入时，图片由半透明逐渐变成清晰，移出时，由清晰变为半透明分析：用变量来储存透明度，因为元素.style.alpha不能直接增加或减少代码中另附有一个设置元素透明度的方法, 是按IE规则(0~100)设置, 若改成标准设置方法(0.00~1.00)<!DOCTYPE html><html> <head> <meta charset="utf-8" />
复制链接

扫一扫