您的位置：首页 > Web前端 > JavaScript

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

2016-09-05 16:45 471 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

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

相关文章推荐

新的分享

章节导航