                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JS动画效果

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

<!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>

qq_小潘安_03830329

2016-11-09

源自：JS动画效果 6-2

关注问题我要回答

576

操作

收起

4 回答

天之殇
2016-11-13

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);
}

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