javascript简单的滑动效果

最新推荐文章于 2025-09-05 11:22:47 发布

weixin_30332705

最新推荐文章于 2025-09-05 11:22:47 发布

阅读量71

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/tarantino/p/8795319.html

本文介绍了一种利用JavaScript的setInterval函数实现简单滑动效果的方法。通过不断更新元素的位置来达到平滑移动的效果，当元素移动到指定位置时停止定时器。

利用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>