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

    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;
    19. }
    20. </style>
    21. </head>
    22. <body>
    23. <div class="move"></div>
    24. <div class="tagget"></div>
    25. <script>
    26. // 弹性运动 速度 = 初始速度 +/- 加速/减速速度 - 摩擦力
    27. var divMove = document.getElementsByClassName('move')[0];
    28. var divTagger = document.getElementsByClassName('tagget')[0];
    29. var timer = null;
    30. function move (dom , target){
    31. clearInterval(timer);
    32. var iSpeed = 0; // 初速度
    33. var accelerate = 3; // 加减速的速度
    34. var friction = 0.8; // 摩擦力
    35. timer = setInterval(() => {
    36. accelerate = (target - dom.offsetLeft) / 4;
    37. iSpeed += accelerate;
    38. iSpeed *= friction;
    39. if( Math.abs(iSpeed) < 1 && Math.abs(target - dom.offsetLeft) < 1){
    40. clearInterval(timer);
    41. dom.style.left = target +'px';
    42. }else{
    43. dom.style.left = dom.offsetLeft + iSpeed + 'px'
    44. }
    45. }, 30)
    46. }
    47. divMove.onclick = function(){
    48. move(this,300)
    49. }
    50. </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;
    26. }
    27. </style>
    28. </head>
    29. <body>
    30. <ul class="container">
    31. <li class="list" style="background: red; opacity: 0.5;"></li>
    32. <li class="list" style="background: blue; opacity: 0.5;"></li>
    33. <li class="list" style="background: yellow; opacity: 0.5;"></li>
    34. <li class="list" style="background: green; opacity: 0.5;"></li>
    35. <li class="by"></li>
    36. </ul>
    37. <script>
    38. // 弹性运动 速度 = 初始速度 +/- 加速/减速速度 - 摩擦力
    39. var li = document.getElementsByTagName("li");
    40. var by = li[li.length-1];
    41. for (var i = 0 ; i< li.length-1 ; i++){
    42. li[i].onmouseenter = function(e){
    43. move(by, this.offsetLeft)
    44. }
    45. }
    46. var timer = null;
    47. function move (dom , target){
    48. clearInterval(timer);
    49. var iSpeed = 0; // 初速度
    50. var accelerate = 3; // 加减速的速度
    51. var friction = 0.8; // 摩擦力
    52. timer = setInterval(() => {
    53. accelerate = (target - dom.offsetLeft) / 4;
    54. iSpeed += accelerate;
    55. iSpeed *= friction;
    56. if( Math.abs(iSpeed) < 1 && Math.abs(target - dom.offsetLeft) < 1){
    57. clearInterval(timer);
    58. dom.style.left = target +'px';
    59. }else{
    60. dom.style.left = dom.offsetLeft + iSpeed + 'px'
    61. }
    62. }, 30)
    63. }