滑块运动 — 左右

html：

<input type="button" value="向右滑动" id="btn1"><input type="button" value="向左滑动" id="btn2"><div id="div1"></div>

css：

#div1 {    width: 50px;    height: 50px;    background-color: red;    position: absolute;    top: 50px;    left: 30px;         }

js：

function $(id){return document.getElementById(id);}// 向前与向后之间的区别：div1  12   800   > //                    div1  -10   10   <    function doMove(obj,dir,target){//参数分别代表：元素、方向（正反方向）、目标点        // 点击后先关闭定时器，防止用户多次连续点击按钮造成加速运动        clearInterval(obj.timer);        // alert(getStyle(div1,'left'));//30px   测试下面写的函数是否可以正常执行        // alert(parseInt(getStyle(div1,'left')));//30  parseInt()把 '30px' => 30         obj.timer = setInterval(function(){//开一个定时器，每隔30毫秒前进一下            var speed = parseInt(getStyle(obj,'left')) + dir;//速度            //在赋值之前先限制最终距离，如果超过300，那么让其等于300            if(speed > target && dir > 0){//往前跑                speed = target;            }            if(speed < target && dir < 0){//往后跑                speed = target;            }            obj.style.left = speed + 'px';//点击一下按钮，红色方块向前进10px;            // 当left值大于300时，关闭定时器让红色方块停止            if(speed == target){//如果到达300，关闭定时器                clearInterval(obj.timer);            }        },30);    }    $('btn1').onclick = function(){//点击btn1调用函数，并传参        doMove(div1,12,300);    }    $('btn2').onclick = function(){//点击btn2调用函数，并传参        doMove(div1,-12,10);    }// 封装获取某个元素的样式函数function getStyle(obj,attr){//obj:你要获取谁，attr:所获取的对象的什么样式    return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];}

注意：
1、如果是相同的功能那么就要封装函数；
2、封装函数前，首先完成一个功能，然后把两个功能有区别的地方列出来，然后用参数进行封装；
3、大于号、小于号不能用参数封装，如果有那么就用if判断（如上面的例子）；
4、div1 12 800 > 分别代表：元素，12是一次向右增加12px（步长），800是目标位置，大于号是进行速度判断的（如果速度大于0向右运动，速度小于0向左运动）