滑动效果实现 

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #box {width:200px; height:200px; background:red; position:absolute; top:100px; left:500px;}
    </style>
</head>
<body>
    
    <div id="box">
    </div> 
    <br />
    <button>向右滑动</button>
    <button>向左滑动</button>
    <button>stop</button>

    <script type="text/javascript">        
        var box = document.getElementById('box');
        var btns = document.getElementsByTagName('button');
        var t1 = null; //定义一个变量，表示定时器
        
        //右滑
        btns[0].onclick = function(){
            clearInterval(t1); //需要先清除定时器
            t1 = setInterval(function(){
                var x = box.offsetLeft; //获取当前box相对于body的位置
                box.style.left = x + 5 + "px";
            },50);
        }
        //左滑
        btns[1].onclick = function(){
            clearInterval(t1); //需要先清除定时器
            t1 = setInterval(function(){
                var x = box.offsetLeft; //获取当前box相对于body的位置
                box.style.left = x - 5 + "px";
            },50);
        }
        //stop
        btns[2].onclick = function(){
            clearInterval(t1);
        }

    </script>
</body>
</html>

 

posted @ 2018-04-02 20:46  小白字太白  阅读(190)  评论(0)    收藏  举报