分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

js 封装一个动画函数

发布时间:2023-09-06 02:36责任编辑:蔡小小关键词:js动画
//动画函数---任意一个元素移动到指定的目标位置 ???//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) ???}

js 封装一个动画函数

原文地址:https://www.cnblogs.com/wanguofeng/p/10600021.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved