链式运动

最新推荐文章于 2020-09-25 21:16:53 发布

原创最新推荐文章于 2020-09-25 21:16:53 发布 · 195 阅读

0 ·

CC 4.0 BY-SA版权

本文探讨了使用JavaScript实现链式动画的方法，通过鼠标悬停和移出事件触发元素宽度、高度及透明度的平滑变化。介绍了回调函数在动画序列中的应用，确保一个动画结束后再启动下一个动画。

在这里插入图片描述

var aDiv = document.getElementsByTagName("div");
            /*
              链式运动：
                  在一个动画结束的时候，开始第二个动画。
                  【注】关键点，找到第一个动画结束的时候
            */

            aDiv[0].onmouseover = function(){
                //宽变为300
                starMove(this,"width",300,function(){
                    starMove(this,"height",300,function(){
                        starMove(this,"opacity",100);
                    })
                });

                
            }
            aDiv[0].onmouseout = function(){
                //宽变为300
                starMove(this,"opacity",30,function(){
                    starMove(this,"height",100,function(){
                        starMove(this,"width",100);
                    })
                });

                
            }
            /*
              回调函数：我们把函数当作参数传入，并且在合适调用的方式，叫做回调函数，在别的编程语言叫做（c语言、c++）叫做函数指针
            */
            
            function starMove(node,attr,iTarget,complete){
                clearInterval(node.timer);
                node.timer = setInterval(function(){
                    //计算速度
                    if(attr=="opacity"){
                        iCur = parseInt(parseFloat(getStyle(node,"opacity"))*100);
                    }else{
                        iCur = parseInt(getStyle(node,attr));
                    }
                    var speed = (iTarget - iCur) / 8;
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                    if(iCur == iTarget){
                        clearInterval(node.timer);
                        if(complete){
                            complete.call(node);
                        }
                        // alert("运动结束了");
                        /*
                           当运动结束以后，应该做什么的代码在这里不能写死
                           【注】封装函数。形参，根据函数不确定的值确定
                           可以将一段代码编写的权力交给别人，声明一个形参，这个形参是用来接收从外面封装好的一个函数的
                        */
                    }else{
                       if(attr=="opacity"){
                           iCur += speed;
                           node.style.opacity = iCur / 100;
                           node.style.filter = "alpha(opacity=" + iCur +")"
                       }else{
                        node.style[attr] = iCur + speed + "px";
                       }
                    }
                },30);

            }
            //获取当前有效样式浏览器兼容写法
            function getStyle(node,cssStr){
                return node.currentStyle ? node.currentStyle[cssStr]:getComputedStyle(node)[cssStr];
            }