JS运动框架move.js注释解析

最新推荐文章于 2022-03-06 03:30:00 发布

原创最新推荐文章于 2022-03-06 03:30:00 发布 · 274 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

本文深入解析JavaScript运动框架move.js的核心函数，包括getStyle()用于获取元素样式，startMove()实现平滑运动效果，支持链式操作。通过对opacity属性的特殊处理以解决浏览器兼容性问题，通过定时器实现动画帧更新，并在所有运动要求达成后停止动画并执行结束回调函数。

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

unction getStyle(obj, name)//获得当前所需的样式
{
if(obj.currentStyle)//兼容性设置
{
return obj.currentStyle[name];
}
else
{
return getComputedStyle(obj, false)[name];
}
}

function startMove(obj, json, fnEnd)//json里面存放需要运动的样式和运动的目标，fnEnd是下一步链式操作的函数
{
clearInterval(obj.timer);
obj.timer=setInterval(function (){
var bStop=true; //假设：所有要求都已经达到
for(var attr in json)
{
var cur=0;

if(attr=='opacity')//改变透明度，单独设置因为兼容性问题
{
cur=Math.round(parseFloat(getStyle(obj, attr))*100);//四舍五入取整
}
else
{
cur=parseInt(getStyle(obj, attr));
}

var speed=(json[attr]-cur)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);//根据运动方向向上向下取整

if(cur!=json[attr])//有目标未完成
bStop=false;

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

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

if(fnEnd)fnEnd();
}
}, 30);
}