完美运动框架封装函数startMove

本文介绍了一个简单的JavaScript动画框架实现,包括获取元素样式、启动动画移动等功能。通过定时器控制元素平滑过渡到指定位置或透明度,适用于网页元素的动态效果制作。

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

function getStyle(obj, attr)
{
if(obj.currentStyle)
{
return obj.currentStyle[attr];//ie
}
else
{
return getComputedStyle(obj, false)[attr];//ff
}
}

function startMove(obj, json, fn)
{
clearInterval(obj.timer);//开定时器之前先关掉原有的计时器
obj.timer=setInterval(function (){
var bStop=true; //这一次运动就结束了――所有的值都到达了
for(var attr in json)
{
//1.取当前的值
var iCur=0;

if(attr=='opacity')
{
iCur=parseInt(parseFloat(getStyle(obj, attr))*100);
}
else
{
iCur=parseInt(getStyle(obj, attr));
}

//2.算速度
var iSpeed=(json[attr]-iCur)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);

//3.检测停止
if(iCur!=json[attr])
{
bStop=false;
}

if(attr=='opacity')
{
obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
obj.style.opacity=(iCur+iSpeed)/100;
}
else
{
obj.style[attr]=iCur+iSpeed+'px';
}
}

if(bStop)
{
clearInterval(obj.timer);

if(fn)
{
fn();
}
}
}, 30)
}

转载于:https://www.cnblogs.com/studyh5/p/9674429.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值