博客

CSS :

 #box{
            width: 100px;
            height: 100px;
            background-color:pink;
            position: absolute;
            top: 100px;
            left: 0px;
            border:  10px solid green;
            padding: 20px;
            /* margin: 20px; */
        }

HTML :

 <input type="button" value="点我移动到400" id="move400">

 <div id="box" style="width: 150px;"></div>

JavaScript

	// 1.声明一个变量来保存盒子的原始位置
        var currentLeft = 0;

        // 2.注册点击事件
        btn.onclick = function(){
            // 3. 开启定时器
          var timeID =  setInterval(function() {
                // 3.1 开始移动
                currentLeft += 15;
                // 3.2 把现在的位置值赋值给left属性
                box.style.left = currentLeft + "px";

                // 3.3 边界检测
                if (currentLeft >= 400) {
                    //3.4 到目标位置，清除定时器 停止运动
                    clearInterval(timeID);
                    // 4. 元素复位
                    box.style.left = "400px"
                }    
            }, 100)
        }

实现效果图 :

怎么能让多个盒子运动呢?

解决多个元素无法同时运动的问题 :

2. 均属盒子封装

CSS :

 #box{
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            left: 100px;
            top: 100px;
        }


        #box1{
            width: 100px;
            height: 100px;
            background-color: #0f0;
            position: absolute;
            left: 100px;
            top: 250px;
        }

HTML :

 	<input type="button" id="move400" value="红色移动到400">
    <input type="button" id="move800" value="绿色移动到800">

    <!-- 盒子移动控制的left -->
    <div id="box"></div>
    <div id="box1"></div>

javaScript

 var btn = document.getElementById("move400");
        var btn1 = document.getElementById("move800");

        
        var box = document.getElementById("box");
        var box1 = document.getElementById("box1");

        // 声明变量保存定时器ID
        var timeID = null;
        //var currentLeft = box.offsetLeft;


        btn.onclick = function(){
            Animation(box,400);
        }


        btn1.onclick = function(){
            Animation(box,800);
        }

		  function Animation(ele, target){          
            // 开启一个定时器之前 先清除原本存在的定时器
            clearInterval(ele.timeID)
            ele.timeID = setInterval(function(){
                // 获取当前位置
                 var currentLeft = ele.offsetLeft;
                // 移动盒子
                currentLeft +=12;
                // 把盒子现在的位置赋值给非left属性
                ele.style.left = currentLeft + "px";

                // 边界检测
                if (currentLeft >= target) {
                    // 停止运动 : 
                    clearInterval(ele.timeID);

                    // 元素复位
                   ele.style.left = target + "px";
                }
            },50)
        }

出现问题 : 如果一个页面有多个元素需要移动 那么多个元素无法同时移动

分析问题 : 页面只有一个timeID， 只能保存一个定时器(一份timeID限制了页面只能由一个定时器运动)

解决问题 : 给页面元素添加属性的方法，将timeID保存到各自的元素中

效果图 :

原来：





移动后 :