javascript简单的滑动效果

利用setInterval实现简单的滑动效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单滑动效果</title>
    <style type = 'text/css'>
        #btn {
            width:45px;
            height:25px;
        }
        #box1 {
            position:relative;
            top:15px;
            width:100px;
            height:100px;
            background:yellow;
            border:2px solid red;
        }
    </style>
</head>
<body>
    <button id="btn">提交</button>
    <div id = 'box1'>
    </div>
</body>
    <script type = 'text/javascript'>
        var box1 = document.getElementById("box1");
        var btn = document.getElementById("btn");
        var count = 0;
        var time = null;
        btn.onclick = function(){
            time = setInterval(function(){
                count += 2;
                if(count === 1000){
                    clearInterval(time);
                    box1.style.display = "none";
                }
                box1.style.left = count + "px"
            },10)
        }

    </script>
</html>

 

posted on 2018-04-11 14:01  Tarantino  阅读(258)  评论(0)  编辑  收藏  举报

导航