js 原生封装的简单动画

/** * Created by luodianlei on 2018/5/12. *///要封装一个函数.这个函数,既可以从左到右,也可以从右到左

// 第一个参数: 要操作的元素// 第二个参数: 目标位置// 第三个参数: 步数// 第四个参数: 到达目标之后调用的函数
function animate(ele, target, step, time, fn){ //防止注册多个定时器 if(ele.timeid){ clearInterval(ele.timeid); } // 1. 让元素缓慢移动 ele.timeid = setInterval(function(){ // 2. 获取当前的位置 var current = ele.offsetLeft; // 3. 判断是从左往右还是从右往左 if(target - current > 0){ // 从左往右 var final = current + step; }else{ //从右往左 var final = current - step; } // 4. 让元素动起来 ele.style.left = final + 'px'; // 5. 判断是否到底目标位置 // 如何判断到达目标位置 // Math.abs(目标位置 - 当前位置的差值) < step 就证明要到达目标位置了 if(Math.abs(target - final) < step){ ele.style.left = target + 'px'; clearInterval(ele.timeid); //如果fn被赋值,就要调用,如果fn不赋值就不调用 if((typeof fn) === 'function'){ fn(); }else{ // 证明传入进来的不是函数 //报错,提示用户,传进来的不是函数 // throw // 抛出去 // 创建一个错误 // new Error('语法错误:第四个参数必须是函数'); throw new Error('语法错误:第四个参数必须是函数'); } } }, time); } 阅读更多