【JavaScript】Dom元素的一次往返运动

JavaScript

发布日期: 2020-08-13

作者: 叶遮沉阳

文章字数: 269

阅读时长: 1 分

阅读次数:

1. 前言

做一个简单小例子，让一个DIV从A运动到B，再从B返回到A。

2. 效果图

3. 源码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>定时运动测试</title>
        <style type="text/css">
            *{margin: 0;padding: 0;}
            #animateImg{position: absolute;}
        </style>
    </head>
    <body>
        <div id="animateImg">
            <img src="动起来.png" />
        </div>
    </body>

    <script>
        window.onload = function(){
            var img = document.getElementById("animateImg");

            // 初版，简单粗暴
            // let forward = setInterval(function(){
            //     if(img.offsetLeft >= 500){
            //         clearInterval(forward);
            //         let backward = setInterval(function(){
            //             if(img.offsetLeft < 0){
            //                 clearInterval(backward);
            //             }else{
            //                 img.style.left = (img.offsetLeft - 1) + "px";
            //             }
            //         }, 30);
            //     }else{
            //         img.style.left = img.offsetLeft + 1 + "px";
            //     }
            // }, 30);


            // 改进，让代码变得稍微优雅一些
            var forward = setInterval(fw, 30);
            var backward;

            var callback = function () {
                if(img.offsetLeft >= 500){
                    clearInterval(forward);
                    backward = setInterval(bw, 30);
                }
                if(img.offsetLeft < 0){
                    clearInterval(backward);
                }
            };

            var mo = new MutationObserver(callback);

            var options = {
              'attributes': true,
            }

            mo.observe(img, options);

            function fw(){
                img.style.left = img.offsetLeft + 1 + "px";
            }
            function bw(){
                img.style.left = (img.offsetLeft - 1) + "px";
            }
        }
    </script>
</html>