原生js多动画同时运动框架(style属性多项同时改变)

本文介绍了一个使用原生JavaScript封装的多物体同时运动动画框架,该框架能够实现元素的width、height、opacity等属性的同时变化,提供了一种高效地控制多个动画同步进行的方法。通过startMultiMove()函数,开发者可以便捷地启动元素的多个样式属性的平滑动画效果。
摘要由CSDN通过智能技术生成

在js中,我们经常会编写代码,实现元素变化运动,如width,height,opacity等
原生封装了运动框架,代码如下

/*
 * 实现多动画同时运动(多物体运动框架)
 *
 * 调用示例   var container = document.getElementById('container');
 *           startMultiMove(container,{width:800,height:800,opacity:100},
 *               function(){alert('123');
 *           });
 * obj -> dom对象
 * json -> style的json数组
 * fn -> 运动之后应该执行的函数
 *
 * */
function startMultiMove(obj,json,fn) {
   
    //清除定时器,防止鼠标重复移动在元素上的情况
    clearInterval(obj.time);
    //设置定时器
    obj.time = setInterval(function 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值