链式运动框架

最新推荐文章于 2019-08-28 17:27:47 发布

前段小白

最新推荐文章于 2019-08-28 17:27:47 发布

阅读量344

点赞数

本文链接：https://blog.csdn.net/qq_38622264/article/details/71178704

版权

<html>
   <head>
       <meta charset="utf-8">
       <title>侧边栏</title>
       <style type="text/css">
           *{margin:0;padding:0}
           div{width:100px;
               height:100px;
               background:red;
               border:1px solid black;
               margin-top:10px;
               }
       </style>


       <script>
           window.onload = function(){
               var odiv = document.getElementById("dd")
               function startMove(obj,json,fn){
   //设置计时器
   clearInterval(obj.timer);
   obj.timer = setInterval(function(){
       var stop = true; //假设json中所有的属性都已经达到目标值
       for(var attr in json){
           //1.获取当前值
           var cur = 0;
           if(attr == "opacity"){
               cur = parseInt(parseFloat(getStyle(obj,attr)) * 100);//若是透明度属性先将其数值转换
           }else{
               cur = parseInt(getStyle(obj,attr));//获取元素初始属性的属性值
           }


           //2.计算速度
           var speed = (json[attr] - cur) / 8; //基数
                   //   目标位置   初始位置
           speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);//解决元素还没到达目标位置是速度变为零或到达目标位后抖动
           //3.判断json中所有的对象是否达到目标值
           if(cur != json[attr]){
               stop = false;
           }
           //4.设置运动
           if(attr == "opacity"){
               obj.style.opacity = (cur + speed) / 100;
               obj.style.filter = "alpha(opacity=" + (cur + speed) + ")";
           }else{
               obj.style[attr] = cur + speed + "px";
           }


           console.log(cur + ":" + json[attr] + ":" + speed);
       }
       //检测停止
       if(stop){
           clearInterval(obj.timer);
           if(fn){
               fn();
           }
       }
   },30)
}
   //获取内部样式
   function getStyle(obj,attr){
       return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,1)[attr];
   }
       odiv.onmousemove = function(){
           startMove(odiv,{"width":500},function(){
               startMove(odiv,{"height":400},function(){
                   startMove(odiv,{"opacity":10})
               })
           })
       }

       odiv.onmouseout = function(){
           startMove(odiv,{"width":100},function(){
               startMove(odiv,{"height":100},function(){
                   startMove(odiv,{"opacity":100})
               })
           })
       }

       }
       </script>

   </head>
   <body>

       <input type="button" value="开始运动" id="btn"/>
       <div id="dd"></div>
   </body>
</html>