JS基本动画

最新推荐文章于 2025-08-11 19:52:03 发布

weixin_34331102

最新推荐文章于 2025-08-11 19:52:03 发布

阅读量93

点赞数

文章标签： javascript ViewUI

本文介绍了一种使用JavaScript和CSS实现元素平移动画的方法，通过定时器和DOM操作，实现了元素从初始位置到目标位置的平滑过渡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

        <style type="text/css">
            .color_red {
                background: red;
            }
            div 
            {
                position: absolute;
                top: 0;
                width: 40px;
                height: 40px;
            }
        
        </style>
        <div  class="color_red" id="divShow">
        
        </div>
        <script language="javascript"> 
                
            function Move() {
                var oM = $("divShow").style, t = 0, c = 10;
                clearTimeout(Move._t);
                function _run() {
                    if (t <= 500) {
                        t++;
                        oM.left = Math.ceil(10 * (t / 10)) + "px";
                        Move._t = setTimeout(_run, 10);
                    } else {
                        oM.left = "0px";
                    }
                }
                _run();
            }
            var $ = function (id) {
                return "string" == typeof id ? document.getElementById(id) : id;
            };
            Move();
        </script>