JS运动基础

时间：2015-12-22 07:51:41 阅读：186 评论：0 收藏：0 [点我收藏+]

让一个div每隔30毫秒向左移动30px

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
    #div1{width:200px; height:200px; background:red; position:absolute; left:0; top:50px;}
</style>
</head>

<body>
    <div id="div1"></div>
    
    <script>
        setInterval(function(){
            var oDiv = document.getElementById("div1");
            
            oDiv.style.left = oDiv.offsetLeft + 10 + ‘px‘;
        },30);
    </script>
</body>

注意offsetLeft为元素距离屏幕的左边距。

利用移动，我们可以做一个无缝滚动的小控件

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
    *{margin:0; padding:0;}
    .scrollList{width:400px; height:100px; margin:0px auto; margin-top:50px; overflow:hidden; position:relative; background:black;}
    .scrollList > ul{position:absolute; left:0; top:0;}
    .scrollList > ul > li{width:100px; height:100px; float:left; list-style:none;}
</style>
</head>

<body>
<div class="scrollList" id="div1">
    <ul>
        <li style="background:red;"></li>
        <li style="background:green;"></li>
        <li style="background:blue;"></li>
        <li style="background:green;"></li>
    </ul>
</div>
    
    <script>
        window.onload = function(){
            var oDiv = document.getElementById("div1");
            var oUl = oDiv.getElementsByTagName("ul")[0];
            var aLi = oUl.getElementsByTagName("li");
            
            oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
            oUl.style.width = aLi[0].offsetWidth * aLi.length + ‘px‘;
            
            setInterval(function(){
                if(oUl.offsetLeft < -oUl.offsetWidth / 2){
                    oUl.style.left = ‘0‘;
                }
                oUl.style.left = oUl.offsetLeft - 2 + ‘px‘;
            },30);
        };
    </script>
</body>
</html>

上面的移动是从右向左滚，如果我们想从左往右滚呢？

<script>
    window.onload = function(){
        var oDiv = document.getElementById("div1");
        var oUl = oDiv.getElementsByTagName("ul")[0];
        var aLi = oUl.getElementsByTagName("li");
        
        oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
        oUl.style.width = aLi[0].offsetWidth * aLi.length + ‘px‘;
        
        setInterval(function(){
            if(oUl.offsetLeft < -oUl.offsetWidth / 2){
                oUl.style.left = ‘0‘;
            }
            if(oUl.offsetLeft > 0){
                oUl.style.left = -oUl.offsetWidth / 2 + ‘px‘;
            }
            oUl.style.left = oUl.offsetLeft + 2 + ‘px‘;
        },30);
    };
</script>

当鼠标进入的时候滚动会停止，移出的时候继续移动

<script>
    window.onload = function(){
        var oDiv = document.getElementById("div1");
        var oUl = oDiv.getElementsByTagName("ul")[0];
        var aLi = oUl.getElementsByTagName("li");
        var timer = null;
        
        oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
        oUl.style.width = aLi[0].offsetWidth * aLi.length + ‘px‘;
        
        function move(){
            if(oUl.offsetLeft < -oUl.offsetWidth / 2){
                oUl.style.left = ‘0‘;
            }
            if(oUl.offsetLeft > 0){
                oUl.style.left = -oUl.offsetWidth / 2 + ‘px‘;
            }
            oUl.style.left = oUl.offsetLeft + 2 + ‘px‘;
        }
        
        timer = setInterval(move,30);
        
        oDiv.onmouseover = function(){
            clearInterval(timer);
        };
        
        oDiv.onmouseout = function(){
            timer = setInterval(move,30);
        };
    };
</script>

最后我们再加上按钮控制整个滚动的方向

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
    *{margin:0; padding:0;}
    .scrollList{width:400px; height:100px; margin:0px auto; margin-top:50px; overflow:hidden; position:relative; background:black;}
    .scrollList > ul{position:absolute; left:0; top:0;}
    .scrollList > ul > li{width:100px; height:100px; float:left; list-style:none;}
</style>
</head>

<body>
<input type="button" value="Left" id="btnL" />
<input type="button" value="Right" id="btnR" />
<div class="scrollList" id="div1">
    <ul>
        <li style="background:red;"></li>
        <li style="background:green;"></li>
        <li style="background:blue;"></li>
        <li style="background:green;"></li>
    </ul>
</div>
    
<script>
    window.onload = function(){
        var oDiv = document.getElementById("div1");
        var oUl = oDiv.getElementsByTagName("ul")[0];
        var aLi = oUl.getElementsByTagName("li");
        var timer = null;
        
        var btnL = document.getElementById("btnL");
        var btnR = document.getElementById("btnR");
        
        var speed = 2;
        
        oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
        oUl.style.width = aLi[0].offsetWidth * aLi.length + ‘px‘;
        
        function move(){
            if(oUl.offsetLeft < -oUl.offsetWidth / 2){
                oUl.style.left = ‘0‘;
            }
            if(oUl.offsetLeft > 0){
                oUl.style.left = -oUl.offsetWidth / 2 + ‘px‘;
            }
            oUl.style.left = oUl.offsetLeft + speed + ‘px‘;
        }
        
        timer = setInterval(move,30);
        
        oDiv.onmouseover = function(){
            clearInterval(timer);
        };
        
        oDiv.onmouseout = function(){
            timer = setInterval(move,30);
        };
        
        btnL.onclick = function(){
            if(speed > 0){
                speed = -speed;
            }
        };
        btnR.onclick = function(){
            if(speed < 0){
                speed = -speed;
            }
        };
    };
</script>
</body>
</html>

JS运动基础

原文：http://www.cnblogs.com/zcynine/p/5065470.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)