OOP侧边分享按钮 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>OOP侧边分享按钮</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }
        #guo {
            width: 150px;
            height: 200px;
            background-color: grey;
            position: fixed;
            left: -150px;
            top: 100px;
        }
        #guo span {
            width: 15px;
            height: 50px;
            background-color: red;
            position: absolute;
            right: -15px;
        }
    </style>
    <script type="text/javascript">
        function GuoMove(oDiv){
            this.oTimer = null;
            var oSpan = oDiv.getElementsByTagName("span")[0];
            var _this = this;
            oDiv.onmouseover = function(){
                _this.fnOver(oDiv);
            };
            oDiv.onmouseout = function(){
                _this.fnOut(oDiv);
            };
        }
        GuoMove.prototype.fnOver = function(oDiv){
            clearInterval(this.oTimer);
            this.oTimer = setInterval(function(){
                if(oDiv.offsetLeft<0)
                    oDiv.style.left = oDiv.offsetLeft+10+"px";
            },30);
        };
        GuoMove.prototype.fnOut = function(oDiv){
            clearInterval(this.oTimer);
            this.oTimer = setInterval(function(){
                if(oDiv.offsetLeft>-150)
                    oDiv.style.left = oDiv.offsetLeft-10+"px";
            },30);
        };
        window.onload = function(){
            var oDiv = document.getElementById("guo");
            var oGuoMove = new GuoMove(oDiv);
        };
    </script>
</head>
<body>
    <div id="guo">
        <span></span>
    </div>
</body>
</html>

 

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