04封装的几个运动js

one 第一个

function startMove(obj,target,attr){
            clearInterval(obj.timer);
            obj.timer = setInterval(function(){
               var current = parseFloat(getStyle(obj,attr));
               var speed = 0;
               if(attr === 'opacity'){
                  speed = target-current>0?0.1:-0.1;
               }else{
                  speed = target-current>0?5:-5;
               }
               
               if(target == current){
                   clearInterval(obj.timer);
               }else{
                if(attr === 'opacity'){
                  obj.style[attr] = current+speed;
                }else{
                  obj.style[attr] = current+speed+'px';
                }
               }
            },20)
           }
//获取元素的属性
function getStyle(obj,attr){
  if(window.getComputedStyle){
      return window.getComputedStyle(obj,null)[attr];
  }else{
      return obj.currentStyle[attr];
  }
}
//针对两种情况来进行一下整合,兼容性写法

应用第一个封装的js来实现的透明度的渐变的案例(多物体的淡入淡出)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        div {
            width: 120px;
            height: 120px;
            background: pink;
            margin-bottom: 10px;
            opacity: 0.3;
        }

        div:nth-child(2) {
            background: red;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <script src="sport.js"></script>
    <script>
         // 鼠标放任何div上  div透明度为1
         var divs = document.querySelectorAll("div");
         for(var i=0; i<divs.length; i++) {
             divs[i].onmouseover = function() {
                 startMove(this,1,"opacity");
             }

             divs[i].onmouseout = function() {
                 startMove(this,0.3,"opacity");
             }
         }
           // 多物体运动 多个元素公用一个定时器 会导致元素不会达到目标值
           // 解决方案  让各自元素维护自己的定时器
          //  function startMove(obj,target,attr){
          //   clearInterval(obj.timer);
          //   obj.timer = setInterval(function(){
          //      var current = parseFloat(getStyle(obj,attr));
          //      var speed = target-current>0?0.1:-0.1;
          //      if(target == current){
          //          clearInterval(obj.timer);
          //      }else{
          //       obj.style[attr] = current+speed;
          //      }
          //   },20)
          //  }
          // //获取dom的属性(ie的兼容性写法)
          // function getStyle(obj,attr){
          //   if(window.getComputedStyle){
          //       return window.getComputedStyle(obj,null)[attr];
          //   }else{
          //       return obj.currentStyle[attr];
          //   }
          // }
    </script>
</body>
</html>

效果图

image.png

应用第一个封装的js来实现的多物体运动的案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        div {
            width: 120px;
            height: 120px;
            background: pink;
            margin-bottom: 10px;
            padding: 4px;
            border: 2px solid #123456;
        }

        div:nth-child(2) {
            background: red;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <script src="sport.js"></script>
    <script>
         // 鼠标放任何div上  div宽度变宽300px
         var divs = document.querySelectorAll("div");
         for(var i=0; i<divs.length; i++) {
             divs[i].onmouseover = function() {
                 startMove(this,300,"width");
             }

             divs[i].onmouseout = function() {
                 startMove(this,120,"width");
             }
         }
          
         /*
           多物体运动 多个元素公用一个定时器 会导致元素不会达到目标值
           解决方案  让各自元素维护自己的定时器
         */ 
        //  function startMove(obj,target,attr){
        //     clearInterval(obj.timer);
        //     obj.timer = setInterval(function(){
        //        var current = parseFloat(getStyle(obj,attr));
        //        var speed = target-current>0?5:-5;
        //        if(target == current){
        //           clearInterval(obj.timer)
        //        }else{
        //           obj.style[attr] = current+speed+'px'
        //        }
        //     },20)
        //  }
        
        // //获取dom的属性(ie的兼容性写法)
        // function getStyle(obj,attr){
        //     if(window.getComputedStyle){
        //         return window.getComputedStyle(obj,null)[attr];
        //     }else{
        //         return obj.currentStyle[attr];
        //     }
        // }
        // oDiv.style.width; // 只能获取行内式
    </script>
</body>
</html>

如图

image.png

two 第二个

/**
 * 
 * @param obj 运动的元素
 * @param target 目标值 
 * @param attr 操作属性 
 * @param callback 回调函数
 */
 //封装一个可以支持回调函数的运动函数
 function startMove(obj,target,attr,callback){
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        //获取到元素的相关属性值
        var current = parseFloat(getStyle(obj,attr));
        var speed = 0;
        if(attr === 'opacity'){
            speed = target-current>0?0.1:-0.1;
        }else{
            speed = target - current>0?5:-5;
        }

        if(target === current){
            clearInterval(obj.timer);
            //执行回调函数
            if(callback){
                callback()
            }
        }else{
           if(attr === 'opacity'){
              obj.style[attr] = current+speed;
           }else{
            obj.style[attr] = current + speed +'px'
           }
        }
    },20)
 }
 //封装获取元素属性的函数
 function getStyle(obj,attr){
    if(window.getComputedStyle){
        return window.getComputedStyle(obj,null)[attr];
    }else{
        return obj.currentStyle[attr];
    }
 }

应用该封装的函数实现的一个物体的链式运动（完成一个动作，接下来执行另一个动作）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 100px;
            height: 100px;
            background: pink;
            opacity: 0.3;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script src="sport2.js"></script>
    <script>
        // 链式运动  一个动作执行完毕 继续下一个动作
        // 鼠标移入div 其宽度变为300 然后高度变为300
        var oDiv = document.querySelector(".box");
        oDiv.onmouseover = function() {
            var _this = this;
            startMove(this,300,'width',function(){
              startMove(_this,300,'height',function(){
                startMove(_this,1,'opacity');
              })
            })
        }
        oDiv.onmouseout = function() {
            var _this = this;
            startMove(this,100,'width',function(){
              startMove(_this,100,'height',function(){
                startMove(_this,0.3,'opacity');
              })
            })
        }
        /*
          this 1 用在事件处理函数中 this代表事件源
               2 回调函数 this指的是window
               3 this取决于调用者
               4 定时器中的this指的是window
        */

       var obj = {
           a:1,
           fn:function() {
               console.log(this);
           }
       };
       obj.fn();
       var fn = obj.fn;
       fn();

        setTimeout(function() {
           console.log(this);
       },20); 
        
    </script>
</body>
</html>

如下图

image.png

three 第三个

/**
 * 
 * @param obj 运动的元素
 * @param json 键值对 
 * @param callback 回调函数
 */
  function startMove(obj,json,callback){
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        var speed = 0;
        var flag = true;
        for(var attr in json){
           var current = parseFloat(getStyle(obj,attr));
           if(attr === 'opacity'){
             speed = json[attr]-current>0?0.1:-0.1;
           }else{
                speed = (json[attr] - current)/10; //    
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                // speed = json[attr]-current>0?5:-5;
           }
           if(json[attr] != current){
              flag = false;
              //设立这一个标志的目的：只要有属性没达到目标 就不能停止运动，以防某一个属性达到了目标值，其余的并没有，但是却停用了定时器
           }

           if(attr === 'opacity'){
            obj.style[attr] = current+speed;
          }else{
            obj.style[attr] = current+speed+'px';
          }
        }
        if(flag){
            clearInterval(obj.timer);
            if(callback){
                callback();
            }
        }
        
    },20)
 }
 function getStyle(obj,attr){
    if(window.getComputedStyle){
        return window.getComputedStyle(obj,null)[attr]
    }else{
        return obj.currentStyle[attr]
    }
 }

应用以上封装的函数来实现的一个物体得几个运动同时展开（完美运动）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 100px;
            height: 100px;
            background: pink;
            opacity: 0.3;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script src="sport3.js"></script>
    <script>
        // 完美运动  多个动画同时执行,而非链式执行
        // 鼠标移入div 同时改变宽和高
        var oDiv = document.querySelector(".box");
        oDiv.onmouseover = function() {
            startMove(this,{"width":30,"height":300},function(){
                console.log('调用回调函数打印')
            });
        }
        oDiv.onmouseout = function() {
            startMove(this,{"width":100,"height":100},function(){
                console.log('调用回调函数打印1')
            });
        }
      
    </script>
</body>
</html>

如图

image.png