元素的移动

通过JavaScript控制元素的移动

1、元素的移动

1.1 目标
元素每0.1s移动10px 。从位置A水平移动到位置B，移动到指定位置后停止移动

1.2 思路

• 将元素设为absolute，脱离文档流。
• 每0.1s将元素的left值增加10px。直到移动到指定位置。

1.3 基本代码如下

    <div class="kuang">  
        <div class="ele"></div>
    </div>

        .kuang {
   
            width: 400px;
            height: 200px;
            border: 2px solid #098;
            position: relative;
            top:60px;
        }
        .ele {
   
            width: 50px;
            height: 50px;
            background-color: lightpink;
            position: absolute;
            left: 0;
        }

        var parent = document.getElementsByClassName("kuang")[0];
        var ele = document.getElementsByClassName("ele")[0];
        var maxSpace = parent.clientWidth - ele.offsetWidth;</