• js--定时器--匀速动画，缓动动画

    1. // 匀速动画
    2. function animate(obj, target) {
    3.     clearInterval(obj.tim)
    4.     var newvalue = 0;
    5.     obj.tim = setInterval(function () {
    6.         newvalue = obj.offsetLeft + 5;
    7.         if (newvalue >= target) {
    8.             newvalue=target;
    9.             clearInterval(obj.tim)
    10.         }
    11.         obj.style.left = newvalue + 'px';
    12.     }, 30)
    13.  
    14. }
    15. // 缓动动画  ：（目标值-现在位置）/10
    16. function animate2(obj, target ,callback) {
    17.     console.log('开始');
    18.     clearInterval(obj.tim)
    19.     var newvalue = 0;
    20.     var step = 0;
    21.      obj.tim = setInterval(function () {
    22.         step =(target - obj.offsetLeft) / 10;
    23.         step =step>0?Math.ceil(step):Math.floor(step);
    24.    
    25.         newvalue = obj.offsetLeft + step;
    26.         if (newvalue >= target&&step>0||newvalue <= target&&step<0) {
    27.             newvalue=target;
    28.             clearInterval(obj.tim);
    29.             if(callback){
    30.                 callback()
    31.             }
    32.             console.log('结束');
    33.         }
    34.         obj.style.left = newvalue + 'px';
    35.     }, 30)
    36. }

    ​​​​​​​动画函数的使用

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         .sliderbar{
    10.             width: 150px;
    11.             height: 50px;
    12.             /* background-color: aqua; */
    13.             position: relative;
    14.             overflow: hidden;
    15.             margin-left: 500px;
    16.         }
    17.         .con{
    18.             width: 50px;
    19.             height: 50px;
    20.             position: absolute;
    21.             background-color: plum;
    22.             top: 0;
    23.             right: 0;
    24.             font-size: 20px;
    25.             line-height: 25px;
    26.             text-align: center;
    27.         }
    28.         span{
    29.             position: absolute;
    30.             height: 50px;
    31.             width: 100px;
    32.             background-color: powderblue;
    33.             top: 0;
    34.             left: 100px;
    35.             line-height: 50px;
    36.             font-size: 20px;
    37.         }
    38.     style>
    39. head>
    40. <body>
    41.     <div class="sliderbar">
    42.         <span><span>
    43.         <div class="con">问题反馈div>
    44.     div>
    45.     <script src="./animation.js">script>
    46.     <script>
    47.         var span=document.querySelector('span');
    48.         var con=document.querySelector('.con');
    49.         con.onmouseenter=function(){      
    50.             animate2(span,0)   
    51.         }
    52.         con.onmouseleave=function(){
    53.             var target=con.offsetLeft;  
    54.             animate2(span,target)
    55.         }
    56.  
    57.     script>
    58. body>
    59. html>
  • 相关阅读:
    DockerFile详解以及测试案例
    新型BI解决方案：SaaS BI，在浏览器上分析数据
    ffmpeg & ffplay
    PyTorch深度学习（二）【反向传播、用pytorch实现线性回归】
    毕业季，作为程序员（it软件开发工程师），如何培养强大的解决问题的能力
    Spring Boot 统一处理功能
    kubernetes 网络
    算法练习day7
    Spring——AOP
    撰写英文文献有哪些技巧？
  • 原文地址：https://blog.csdn.net/cmy741741/article/details/126095439