为什么div的大小不能还原成200/200，请帮忙看下，TKS~!-慕课网

为什么div的大小不能还原成200/200，请帮忙看下，TKS~!

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

qq_小潘安_03830329

2016-11-09 16:50

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>运动框架检验03</title>
       <style type="text/css">
           *{margin: 0;padding: 0;list-style: none;}
           div{
               width: 200px;
               height: 200px;
               border: 30px solid red;
               background: blue;
               margin: 50px auto;
               opacity: 1;
           }
       </style>

       <script type="text/javascript" src="js/starMove.js"></script>
       <script type="text/javascript">
           window.onload=function(){
               var odiv=document.getElementById("div");
               odiv.onmouseover=function(){
                   starMove(odiv,{width:400,height:400,opacity:0},function(){
                       odiv.style.background="green";
                       starMove(odiv,{width:200,height:200,opacity:100});
                   });
               };
           };
       </script>
   </head>
   <body>
       <div id="div"></div>
   </body>
</html>

写回答关注

4回答

天之殇: 2016-11-13 12:01:27

function startMove(obj,json,fn){
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        var flag = true;
        for(var attr in json){
            var typeValue = null;
            if(attr=="opacity")
                typeValue = Math.round(parseFloat(getStyle(obj,attr))*100);
            else
                typeValue = parseInt(getStyle(obj,attr));
            var speed = (json[attr]-typeValue)/8;
            speed = speed>0? Math.ceil(speed):Math.floor(speed);
            if(typeValue!=json[attr]){
                console.info(flag)
                flag = false;
            }
            if(attr=="opacity"){
                obj.style.filter = 'alpha(opacity:'+typeValue+speed+')';
                obj.style[attr] = (typeValue+speed)/100;
            }
            else
                obj.style[attr] = typeValue+speed+"px";
        }
        if(flag){
            console.info("flag:"+flag);
            clearInterval(obj.timer);
            if(fn){
                fn();
            }
        }
    },30);
}

这是我的移动函数，是可以实现你的效果

0 0

慕勒3800520

2016-11-12 16:12:33

是不是你的运动函数的问题，还有opcity:100对的吗，按照课程里封装的函数不应该是opcity:1才是不透明吗

0 0
qq_小潘安_03830329

2016-11-10 11:54:59

不是啊，先是200/200，变成400/400，完成后再变成200/200，跟移入移出没有关系吧，是链式运动，完成变大变小的~~

0 0
精慕门2798116

2016-11-09 21:29:41

以为你没有写移出的操作啊。只写了onmouseover你的onmouseout呢

0 1

JS动画效果

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

113910 学习 · 1502 问题

查看课程

相似问题

不懂为什么（itarget-odiv.offsetLeft）/20 之后left就回不到200或者-200了。。。。

回答 3

求大神帮忙看看，为什么div的颜色没有变化

回答 4

回答 2

回答 1

回答 1