当前位置:网站首页>JS动画函数封装
JS动画函数封装
2022-08-09 12:59:00 【_七七】
function animate(obj, target, callback) {
// console.log(callback); callback = function() {} 调用的时候 callback()
// 先清除以前的定时器,只保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function () {
// 步长值写到定时器的里面
// 把我们步长值改为整数 不要出现小数的问题
// var step = Math.ceil((target - obj.offsetLeft) / 10);
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
// 停止动画 本质是停止定时器
clearInterval(obj.timer);
// 回调函数写到定时器结束里面
// if (callback) {
// // 调用函数
// callback();
// }
callback && callback();
}
// 把每次加1 这个步长值改为一个慢慢变小的值 步长公式:(目标值 - 现在的位置) / 10
obj.style.left = obj.offsetLeft + step + 'px';
}, 15);
}
边栏推荐
猜你喜欢
GIN Bind模式获取参数和表单验证
The sword refers to the offer, cuts the rope 2
Map mixed density function and quantile added line
Oracle Recovery Tools修复空闲坏块
GIN a preliminary study, the environment is installed
Redis源码剖析之字典(dict)
30行代码实现蚂蚁森林自动偷能量
5G China unicom 直放站 网管协议 实时性要求
GIN文件上传与返回
error Trailing spaces not allowed no-trailing-spaces 9:14 error Unexpected trailing comma
随机推荐
陈强教授《机器学习及R应用》课程 第十六章作业
绘制混合密度函数图以及添加分位数线
5G China unicom 一般性异常处理
Professor Chen Qiang's "Machine Learning and R Application" course Chapter 13 Assignment
剑指 Offer 56 - II. 数组中数字出现的次数 II(位运算)
How to solve the 0x80070005 error when the computer is reinstalled and the system is restored
某高校的R语言数据分析期末作业
剑指 Offer 21. 调整数组顺序使奇数位于偶数前面(循环不变量)
ftplib+ tqdm upload and download progress bar
jenkins api create custom pipeline
Anta and Huawei Sports Health jointly verify the champion running shoes and lead Chinese sports with innovation
七夕力扣刷不停,343. 整数拆分(剑指 Offer 14- I. 剪绳子、剑指 Offer 14- II. 剪绳子 II)
SQL Server查询优化 (转载非原创)
万物皆可柯里化的 Ramda.js
FFmpeg多媒体文件处理(ffmpeg打印音视频Meta信息)
telnet+ftp to control and upgrade the device
30行代码实现蚂蚁森林自动偷能量
javscript基础易错点集合
力扣解法汇总1413-逐步求和得到正数的最小值
ArcEngine(九)图形绘制