运动多样式框架

最新推荐文章于 2025-10-01 00:09:58 发布

原创最新推荐文章于 2025-10-01 00:09:58 发布 · 141 阅读

CC 4.0 BY-SA版权

在这里插入图片描述

var oDiv1 = document.getElementById("div1");
            /*
              宽高透明度同时发生变化
            */
            oDiv1.onmouseover = function(){
                starMove(this,{
                    width:300,
                    height:102,
                    opacity:30
                },function(){
                    alert("over");
                });

            }
            oDiv1.onmouseout = function(){
                starMove(this,{
                    width:100,
                    height:100,
                    opacity:100
                })

            }
            /*
              回调函数：我们把函数当作参数传入，并且在合适调用的方式，叫做回调函数，在别的编程语言叫做（c语言、c++）叫做函数指针

              问题：其中有一个动画到达目的值，就把定时器关闭了。
              解决：当所有的动画到达目的值，才能关闭定时器
            */
            

            //样式框架
            function starMove(node,cssObj,complete){
                clearInterval(node.timer);
                node.timer = setInterval(function(){
                    var isEnd = true;//假设所有的动画都达到目的值了
                    for(var attr in cssObj)
                    {
                        var iTarget = cssObj[attr];
                        //计算速度
                    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(attr=="opacity"){
                        iCur += speed;
                        node.style.opacity = iCur / 100;
                        node.style.filter = "alpha(opacity=" + iCur +")"
                    }else{
                    node.style[attr] = iCur + speed + "px";
                    }

                    if(iCur != iTarget){
                        isEnd = false;
                    }

                    }
                    if(isEnd){
                        clearInterval(node.timer);
                        if(complete){
                            complete.call(node);
                        }
                    }
                    
                    
                },30);

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