OOP无缝滚动 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>OOP无缝滚动</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }
        div.container {
            position: relative;
            width: 815px;
            height: 160px;
            margin: 20px auto;
            border: 20px solid springgreen;
            overflow: hidden;
        }
        ul {
            position: absolute;
            margin: 0;
            padding: 0;
        }
        li {
            width: 200px;
            height: 160px;
            display: inline-block;
            list-style: none;
        }
    </style>
    <script type="text/javascript">
        function GuoMove(oDiv){
            var oUl = oDiv.getElementsByTagName("ul")[0];
            oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
            var aLi = oDiv.getElementsByTagName("li");
            oUl.style.width = aLi[0].offsetWidth * aLi.length + "px";
            this.oTimer = setInterval(function(){
                if(oUl.offsetLeft < -oUl.offsetWidth/2)
                    oUl.style.left = oUl.offsetLeft + oUl.offsetWidth/2 + "px";
                else
                    oUl.style.left = oUl.offsetLeft - 2 + "px";
            },30);
            var _this = this;
            oDiv.onmouseover = function(){
                //注意变量的作用域，什么时候这些变量能在函数内部直接用，什么时候这些变量需要作为参数传递给函数后才能在函数内部使用，区分原型方法。
                //clearInterval(_this.oTimer);
                _this.fnOver();
            };
            oDiv.onmouseout = function(){
                _this.fnOut(oUl);
            };

        }
        GuoMove.prototype.fnOver = function(){
            clearInterval(this.oTimer);
        };
        GuoMove.prototype.fnOut = function(oUl){
            this.oTimer = setInterval(function(){
                if(oUl.offsetLeft < -oUl.offsetWidth/2)
                    oUl.style.left = oUl.offsetLeft + oUl.offsetWidth/2 + "px";
                else
                    oUl.style.left = oUl.offsetLeft - 2 + "px";
            },30);
        };
        window.onload = function(){
            var oDiv = document.getElementsByClassName("container")[0];
            var oGuoMove = new GuoMove(oDiv);

        };
    </script>
</head>
<body>
    <div class="container">
        <ul>
            <li style="background-color: red"></li>
            <li style="background-color: yellow"></li>
            <li style="background-color: blue"></li>
            <li style="background-color: grey"></li>
        </ul>
    </div>
</body>
</html>

 

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