想了想,还是把之前的补齐,先放个封装的运动吧

博客分享了封装运动函数的代码。包含获取非行间样式的函数,以及运动函数,该函数接收元素、属性值对象和回调函数,通过定时器实现元素的运动效果,还处理了透明度属性,最后给出了代码的转载来源。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

//获取非行间样式
function getStyle(ele,attr){
return ele.currentStyle ? ele.currentStyle[attr] : getComputedStyle(ele,null)[attr];
}

function move(ele,json,fn){ //json的接收 {width:10900}
//清除定时器
clearInterval(ele.timer);
//开启定时器
ele.timer = setInterval(function(){
var mStop = true;
//遍历json
for(attr in json){
//获取变换的属性的值
var iCur = getStyle(ele,attr);
//判断是否为透明
if(attr == 'opacity'){
iCur *= 100;
}else{
iCur = parseInt(iCur);
}
//设置速度
var speed = (json[attr] - iCur) / 8;
//速度取整
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
//判断
if(iCur != json[attr]){
mStop = false;
}
//运动的逻辑
if(attr == 'opacity'){
ele.style.opacity = (iCur + speed) / 100;
ele.style.filter = 'alpha(opacity='+(iCur + speed)+')'
}else{
ele.style[attr] = iCur + speed + 'px';
}
}

if(mStop){
clearInterval(ele.timer);
if(fn){
fn();
}
}
},30)
}

转载于:https://www.cnblogs.com/huichaoboke/p/10945663.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值