js 封装一个动画函数
程序员文章站
2022-07-01 09:03:16
//动画函数---任意一个元素移动到指定的目标位置 //element为元素 target为位置 function carToon(element, target) { //设置一个定时器让他循环去增加 element.timeid = setInterval(function () { //拿到当... ......
//动画函数---任意一个元素移动到指定的目标位置 //element为元素 target为位置 function cartoon(element, target) { //设置一个定时器让他循环去增加 element.timeid = setinterval(function () { //拿到当前的位置(纯数字) var current = element.offsetleft; //每次要移动的像素current var step = 10; //注意 这里是判断到底往那边走 如果当前的位置大于目标位置那么就往回走(往左边走 就是负的像素) //否则 当前位置小于目标地址 就继续往右走(正数的像素) step = current > target ? -step : step; //这里是移动之后的位置 current += step; //判断目标位置-当前的位置是否大于每次走的像素 if (math.abs(target - current) > math.abs(step)) { //继续移动 element.style.left = current + 'px'; } else { //目标位置-当前的位置小于每次走的像素.清理定时器 然后让它直接移动到目标的位置 clearinterval(element.timeid); element.style.left = target + 'px'; } }, 10) }