OOP淡入淡出 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>OOP淡入淡出</title>
    <style type="text/css">
        
        div {
            width: 200px;
            height: 160px;
            margin: auto;
            border: 20px solid springgreen;
            background-color: palevioletred;
            filter: alpha(opacity: 30);
            opacity: 0.3;
        }
    </style>
    <script type="text/javascript">
        function FnGuo(oDiv){
            var _this = this;
            this.nowAlpha = 30;
            this.oTimer = null;
            oDiv.onmouseover = function(){
                _this.fnOpacity(oDiv,100);
            };
            oDiv.onmouseout = function(){
                _this.fnOpacity(oDiv,30);
            };
        }
        FnGuo.prototype.fnOpacity = function(oDiv,tarAlpha){
            clearInterval(this.oTimer);
            //注意setInterval函数里面的this是定时器本身，如果访问类FnGuo的成员变量比如nowAlpha，必须在函数setInterval外保存this。
            var _this = this;
            this.oTimer = setInterval(function(){
                if(tarAlpha > _this.nowAlpha)
                {
                    _this.nowAlpha += 2;
                    oDiv.style.filter = 'alpha(opacity:'+ _this.nowAlpha +')';
                    oDiv.style.opacity = _this.nowAlpha/100;
                }
                else if(tarAlpha < _this.nowAlpha)
                {
                    _this.nowAlpha -= 2;
                    oDiv.style.filter = 'alpha(opacity:'+ _this.nowAlpha +')';
                    oDiv.style.opacity = _this.nowAlpha/100;
                }
                else
                {
                    //clearInterval(_this.oTimer);
                }
            },30);
        };

        window.onload = function(){
            var oDiv = document.getElementsByTagName("div")[0];
            var oFnGuo = new FnGuo(oDiv);
        };
    </script>
</head>
<body>
    <div></div>
</body>
</html>

 

posted @ 2017-11-22 14:37  我将枕中记忆抹去任岁月浮光掠影  阅读(156)  评论(0)  编辑  收藏  举报