我敲的框架做链式运动时要再触发一次onmouseover才可以，大神帮我看下，TKS!-慕课网

我敲的框架做链式运动时要再触发一次onmouseover才可以，大神帮我看下，TKS!

来源：6-2 完美运动框架

qq_小潘安_03830329

2016-11-09 13:31

<!--HTML-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>自定义运动框架08-链式运动(函数传参)</title>
        <style type="text/css">
            *{margin: 0;padding: 0;list-style: none;}
            ul li{
                width: 200px;
                height: 100px;
                background: #FF7F50;
                border: 1px solid black;
            }
        </style>
        <script type="text/javascript" src="js/starMove.js"></script>
        <script type="text/javascript">
            window.onload=function(){
                var oli=document.getElementById("li1");
                oli.onmouseover=function(){
                    starMove(oli,{width:400},function(){
                        starMove(oli,{height:200},function(){
                            starMove(oli,{opacity:30})
                        });
                    });
                };
                oli.onmouseout=function(){
                    starMove(oli,"opacity",100,function(){
                        starMove(oli,"height",100,function(){
                            starMove(oli,"width",200)
                        });
                    });
                };
            };
        </script>
    </head>
    <body>
        <ul>
            <li id="li1"></li>
        </ul>
    </body>
</html>
<!--JS-->
/*框架*/
function starMove(obj,json,fn){
    
    var flag=true;//假设所有对象都到达了目标值
    
    clearInterval(obj.timer);//清除定时器
    obj.timer=setInterval(function(){
        for(var attr in json){
        
        //兼容判断
        var icur=0;
        if (attr=="opacity") {
            icur=Math.round(parseFloat(getStyle(obj,attr))*100);
            //parseInt(getStyle(obj,attr));
        } else{
            icur=parseInt(getStyle(obj,attr));
        };
        //var icur=parseInt(getStyle(obj,attr));//此处不兼容透明度
        var t=20;
        var speed=(json[attr]-icur)/t;
        speed=speed>0?Math.ceil(speed):Math.floor(speed);
        if (icur!=json[attr]) {
            flag=false;
        };
            //clearInterval(obj.timer);
            //if(fn){fn();};
        //} else{
            //执行判断：处理单位不兼容透明度问题
        if (attr=="opacity") {
            obj.style.filter="alpha(opacity:"+(icur+speed)+")";//IE
            obj.style.opacity=(icur+speed)/100;
        } else{
            obj.style[attr]=icur+speed+"px";//单位不兼容透明度
        };
        //};
        
        if(flag){
            clearInterval(obj.timer);
            if(fn){
                fn();
            };
        };
        };
    },30);
};

写回答关注

3回答

慕运维2724122: 2016-11-22 16:49:11

if (icur != json[attr]) {
    flag = false;
}else {
    flag = true;
}

改成这样吧，小白好理解一点。

0 0

折翼天使I: 2016-11-09 20:09:47

顺便说下，你的那个鼠标移除的函数调用的传参有点问题，应该改成下面这样：

 oli.onmouseout=function(){
                               starMove(oli,{opacity:100},function(){
                                   starMove(oli,{height:100},function(){
                                       starMove(oli,{width:200})
                                   });
                               });
                           };

0 0

折翼天使I

2016-11-09 20:05:47
老师写的那个运动框架中判断运动停止的那句语句有问题：
```
 if (icur!=json[attr]) {
            flag=false;
        };
```
你把它改成下面这样就可以了：
```
 flag = icur == json[attr] || false ;
```
由于javascript是从上到下执行的，老师写的那个判断是指：如果属性没有执行完成，那么就将flag设置为false，
可是当所有的属性执行完成后又没有将flag的值重置为true；
可是那个回调函数（链式运动）的判断条件是flag为true，所以链式运动无法执行。而重新将移入鼠标后，flag被设置为true了，而属性已经完成，没有被设置为false，所以就执行链式运动了。
0 0

JS动画效果

通过本课程JS动画的学习，从简单动画开始，逐步深入各种动画框架封装

113920 学习 · 1500 问题

查看课程

相似问题

onmouseover是移动到元素上触发一次还是指针悬浮时触发

回答 1

这个框架有问题吧，鼠标以不能做链式运动

回答 3

链式函数怎么不起作用了,大家帮我看下我的框架有问题吗

回答 1

为什么鼠标移入一次才触发一次而不是链式的？

回答 1

用运动框架应用链式运动出现的错误

回答 1

打开慕课网App查看更多内容