动画——透明度

最新推荐文章于 2021-03-17 19:23:27 发布

小轩雪

最新推荐文章于 2021-03-17 19:23:27 发布

阅读量240

点赞数

分类专栏： JavaScript 文章标签：动画

本文链接：https://blog.csdn.net/qq_21119289/article/details/59483636

版权

JavaScript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #divid{
            height: 200px;
            width: 200px;
            background-color: red;
            -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
            filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
            opacity: 0.3;
        }
    </style>
    <script>
        window.onload=function () {
            var oDiv = document.getElementById("divid");
            oDiv.onmouseover= function () {
                startMove(100);
            };
            oDiv.onmouseout= function () {
                startMove(30);
            };
        }
        var alpha = 30;
        var timer = null;
        var startMove = function (iTarget) {
            var  oDiv =document.getElementById("divid");
            clearInterval(timer);

            timer = setInterval(function () {
                var speed = 0;
                //由于iTarget的不同来决定是正向还是负向来变化
                if(alpha<iTarget){
                    speed = 1;
                }else {
                    speed = -1;
                }
                //透明度是否达到目标，达到了就清除定时器
                if (alpha == iTarget){
                    clearInterval(timer);
                }else{
                    alpha+=speed;
                    oDiv.style.filter= "progid:DXImageTransform.Microsoft.Alpha(Opacity="+alpha+")";
                    oDiv.style.opacity = alpha/100;
                }
            },30);
        }

    </script>
</head>
<body>
<div id="divid"></div>
</body>
</html>