原生js图片渐变透明兼容ie

最新推荐文章于 2024-05-07 21:04:09 发布

深沉的简单

最新推荐文章于 2024-05-07 21:04:09 发布

阅读量698

点赞数

分类专栏： JavaScript 文章标签：原生js图片渐变透明兼容ie

本文链接：https://blog.csdn.net/u013861109/article/details/52441524

版权

JavaScript 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body, div {
            margin: 0;
            padding: 0;
        }

        img {
            width: 1280px;
            height: 720px;
            filter: alpha(opacity:30);
            opacity: 0.3;
        }
    </style>
</head>
<body>
<div id="div"><img src="McLaren-P1.jpg"/></div>
<script type="text/javascript">
    window.onload = function () {                                     //页面加载运行函数
        var img = document.getElementsByTagName('img')[0],            //img 等于第一个标签img
                timer = null,                                         //timer等于空
                alpha = 30;                                           //alpha等于30

        img.onmouseover = function () {                               //img鼠标经过事件
            changeOpa(100);                                           //向changeOpa函数传参100
        }

        img.onmouseout = function () {                                //img鼠标离开事件
            changeOpa(30);                                             //向changeOpa函数传参30
        }

        function changeOpa(iOpa) {                                    //changeOpa函数
            clearInterval(timer);                                     //清空定时器
            timer = setInterval(function () {                         //定时器函数
                var speed = 0;
                if (alpha < iOpa) {                                   //如果30小鱼传进来的参数
                    speed = 10;                                       //等于10
                }
                else {
                    speed = -10;                                     //否则等于-10
                }
                if (alpha == iOpa) {                                 //如果相等就停止定时器
                    clearInterval(timer);
                }
                else {
                    alpha += speed;                                     //否则alpha等于alpha自己加speed
                    img.style.filter = 'alpha(opacity:' + alpha + ')'; //img的样式透明度等于alpha    ie版本
                    img.style.opacity = alpha / 100;                    //img的样式透明度等于alpha除以100
                }
            }, 30)
        }
    }
</script>
</body>
</html>