JS实现运动缓冲效果的封装函数示例
作者:MaxLucio 时间:2023-06-30 14:34:45
本文实例讲述了JS实现运动缓冲效果的封装函数。分享给大家供大家参考,具体如下:
之前经常写运动函数,要写好多好多,后来想办法封装起来。(运动缓冲)。
/*
物体多属性同时运动的函数
obj:运动的物体
oTarget:对象,属性名为运动的样式名,属性值为样式运动的终点值
ratio:速度的系数
*/
function bufferMove(obj, oTarget, fn,ratio = 8) {
clearInterval(obj.iTimer);
obj.iTimer = setInterval(function () {
// 此处设定开关bBtn,假设所有的属性均已运动完毕true
var bBtn = true;
for(var sAttr in oTarget){
// 获取当前值,此处兼容透明度的变化
if(sAttr === 'opacity') {
var iCur = parseFloat(getStyle(obj, sAttr) * 100);
} else {
var iCur = parseInt(getStyle(obj, sAttr));
}
// 计算速度,此处可判定方向,如向左或向右,先透明后出现或先出现后透明等
var iSpeed = (oTarget[sAttr] - iCur) / ratio;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
// 计算下一次的值
var iNext = iCur + iSpeed;
// 赋值给对应样式
if(sAttr ==='opacity') {
obj.style.opacity = iNext / 100;
obj.style.filter = 'alpha(opacity=' + iNext +')';
} else {
obj.style[sAttr] = iNext + 'px';
}
// 清除定时器,当前的位置和终点值是否相等,相等则说明结束
if(iNext !== oTarget[sAttr]) {
bBtn = false;
}
}
// 如果bBtn的值为true,则说明所有的属性均已运动完毕,回调函数fn()
if(bBtn) {
clearInterval(obj.iTimer);
if(fn){
fn();
}
}
}, 50);
}
以上封装函数也可以用于单个属性,多样式运动,比如:
bufferMove(obj,{"left":200,"width":400,"opacity":80},fn,8);
就这样。
希望本文所述对大家JavaScript程序设计有所帮助。
来源:https://www.cnblogs.com/lucio110/p/7345286.html
标签:JS,运动缓冲,封装函数
0
投稿
猜你喜欢
Python去除字符串前后空格的三种方法汇总
2023-04-18 22:40:57
Python学习之sys模块使用教程详解
2021-03-31 01:38:50
python 装饰器的使用示例
2021-05-15 00:52:09
解决matplotlib库show()方法不显示图片的问题
2021-08-25 19:53:34
PHP扩展之kafka安装应用案例详解
2023-09-06 09:53:43
Python实现定时任务的八种方案详解
2022-04-19 06:54:03
JSP使用MVC模式完成删除和修改功能实例详解
2024-03-20 03:39:42
原生JS实现弹幕效果的简单操作指南
2024-04-22 22:31:20
QQ在线客服网页代码大全
2008-01-17 18:28:00
如何用SQLMail建立一个电子刊物自动处理系统?
2010-06-13 14:36:00
深入分析MySQL数据类型 DECIMAL
2024-01-26 04:07:59
微信小程序应用号开发体验
2022-03-12 12:56:02
Python 异步之如何保护任务免于取消详解
2022-08-04 05:03:26
Python捕获异常堆栈信息的几种方法(小结)
2022-02-19 08:01:30
Python迭代和迭代器详解
2023-11-20 08:52:28
如何在sublime编辑器中安装python
2021-01-12 05:27:00
PHP中使用cURL实现Get和Post请求的方法
2023-08-18 13:15:35
vscode 一键规范代码格式的实现
2022-01-14 17:24:53
JS实现字符串转驼峰格式的方法
2024-04-10 13:58:45
python k-近邻算法实例分享
2022-03-26 14:47:17