弹性运动
    弹性运动 速度 = 初始速度 +/- 加速/减速速度 - 摩擦力
    加速/减速速度 的速度会时时改变，

    1. <head>
    2.     <meta charset="UTF-8">
    3.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    4.     <title>Document</title>
    5.     <style>
    6.         .move{
    7.             width: 100px;
    8.             height: 100px;
    9.             background: red;
    10.             position: absolute;
    11.             left: 0;
    12.         }
    13.         .tagget{
    14.             width: 1px;
    15.             height: 100px;
    16.             background: black;
    17.             position: absolute;
    18.             left: 300px;
    20.         }
    21.     </style>
    22. </head>
    23. <body>
    24.     <div class="move"></div>
    25.     <div class="tagget"></div>
    26.     <script>
    27.         // 弹性运动 速度 = 初始速度 +/- 加速/减速速度 - 摩擦力
    28.         var divMove = document.getElementsByClassName('move')[0];
    29.         var divTagger = document.getElementsByClassName('tagget')[0];
    30.         var timer = null;
    31.         function move (dom , target){
    32.             clearInterval(timer);
    33.             var iSpeed = 0;            // 初速度
    34.             var accelerate = 3; // 加减速的速度
    35.             var friction = 0.8; // 摩擦力
    36.             timer = setInterval(() => {
    37.                 accelerate = (target - dom.offsetLeft) / 4;
    38.                 iSpeed += accelerate;
    39.                 iSpeed *= friction;
    40.                 if( Math.abs(iSpeed) < 1 && Math.abs(target - dom.offsetLeft) < 1){
    41.                     clearInterval(timer);
    42.                     dom.style.left = target +'px';
    43.                 }else{
    44.                     dom.style.left = dom.offsetLeft + iSpeed + 'px'
    45.                 }
    48.             }, 30)  
    49.         }
    50.         divMove.onclick = function(){
    51.             move(this,300)
    52.         }
    53.     </script>

    小demo

    1. <head>
    2.     <meta charset="UTF-8">
    3.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    4.     <title>Document</title>
    5.     <style>
    6.         .container{
    7.             margin: 300px auto;
    8.             width: 800px;
    9.             height: 98px;
    10.             border: 1px solid black;
    11.             line-height: 98px;
    12.             text-align: center;
    13.             padding: 0px;
    14.             list-style: none;
    15.             position: relative;
    16.         }
    17.         li{
    18.             width: 200px;
    19.             height: 100px;
    20.             float: left; 
    21.         }
    22.         .by{
    23.             position: absolute;
    24.             background: rgba(0, 0, 0, 0.4);
    25.             z-index: -1;
    28.         }
    29.     </style>
    30. </head>
    31. <body>
    32.     <ul class="container">
    33.         <li class="list" style="background: red; opacity: 0.5;"></li>
    34.         <li class="list" style="background: blue; opacity: 0.5;"></li>
    35.         <li class="list" style="background: yellow; opacity: 0.5;"></li>
    36.         <li class="list" style="background: green; opacity: 0.5;"></li>
    37.         <li class="by"></li>
    38.     </ul>
    39.     <script>
    40.         // 弹性运动 速度 = 初始速度 +/- 加速/减速速度 - 摩擦力
    41.         var li = document.getElementsByTagName("li");
    42.         var by = li[li.length-1];
    43.         for (var i = 0 ; i< li.length-1 ; i++){
    44.             li[i].onmouseenter = function(e){
    45.                 move(by, this.offsetLeft)
    46.             }
    47.         }
    48.         var timer = null;
    49.         function move (dom , target){
    50.             clearInterval(timer);
    51.             var iSpeed = 0;     // 初速度
    52.             var accelerate = 3; // 加减速的速度
    53.             var friction = 0.8; // 摩擦力
    54.             timer = setInterval(() => {
    55.                 accelerate = (target - dom.offsetLeft) / 4;
    56.                 iSpeed += accelerate;
    57.                 iSpeed *= friction;
    58.                 if( Math.abs(iSpeed) < 1 && Math.abs(target - dom.offsetLeft) < 1){
    59.                     clearInterval(timer);
    60.                     dom.style.left = target +'px';
    61.                 }else{
    62.                     dom.style.left = dom.offsetLeft + iSpeed + 'px'
    63.                 }
    66.             }, 30)  
    67.         }