JS 运动框架2 链式运动

最新推荐文章于 2025-08-12 14:37:12 发布

Lewandowski-y

最新推荐文章于 2025-08-12 14:37:12 发布

阅读量343

点赞数

分类专栏： JavaScript学习笔记文章标签： javascript

JavaScript学习笔记专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现链式运动的方法，通过定义`getStyle`和`startMove`函数，实现在一个运动完成后自动执行下一个运动，具体展示了如何在元素上连续改变宽度、高度和透明度。

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

链式运动，在一个运动完成之后，执行函数，开始下一次运动
链式运动框架：

function getStyle(obj, name)
{
    if(obj.currentStyle)
    {
        return obj.currentStyle[name];
    }
    else
    {
        return getComputedStyle(obj, false)[name];
    }
}

function startMove(obj, attr, iTarget, fnEnd)//这里添加一个参数，叫fnEnd，实际是一个函数传参
{
    clearInterval(obj.timer);
    obj.timer=setInterval(function (){
        var cur=0;

        if(attr=='opacity')
        {
            cur=Math.round(parseFloat(getStyle(obj, attr))*100);
        }
        else
        {
            cur=parseInt(getStyle(obj, attr));
        }

        var speed=(iTarget-cur)/16;
        speed=speed>0?Math.ceil(speed):Math.floor(speed);

        if(cur==iTarget)
        {
            clearInterval(obj.timer);

            if(fnEnd)fnEnd();//这里当前面的运动停止时，执行fnEnd()这个运动
        }
        else
        {
            if(attr=='opacity')
            {
                obj.style.filter='alpha(opacity:'+(cur+speed)+')';
                obj.style.opacity=(cur+speed)/100;

            }
            else
            {
                obj.style[attr]=cur+speed+'px';
            }
        }
    }, 30);
}

实际应用例子：

    <script>
    window.onload=function()
    {
        var oDiv=document.getElementById('div1');

        oDiv.onmouseover=function()
        {
            //链式运动，一个运动完成后接着另一个运动
            startMove(oDiv,'width',800,function()
            {
                   startMove(oDiv,'height',450,function()
                   {
                          startMove(oDiv,'opacity', 100)
                   })
            })
        }

        oDiv.onmouseout=function()
        {
            startMove(oDiv,'opacity',50, function()
            {
                startMove(oDiv,'height', 100,function()
                {
                    startMove(oDiv,'width',100)
                })
            })
        }
    }
    </script>