js 震动动画

最新推荐文章于 2021-06-04 04:32:37 发布

li905663280

最新推荐文章于 2021-06-04 04:32:37 发布

阅读量428

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/li905663280/article/details/84866762

版权

javascript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

####js震动动画

<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

 

    <title>Hello, world!</title>
    <style type="text/css">
        .container {
            height: 300px;
            position: relative;
            width: 1000px;
            background-color: yellow
        }
        #block {
            height: 10px;
            width: 10px;
            position: absolute;
            top: 0px;
            left: 0px;
            background-color: black;
        }
    </style>
     <script type="text/javascript">
        function animate(e,time,width){
            var start=(new Date()).getTime();
            function move(){
                var now=(new Date()).getTime();
                var diff=now-start;
                var fraction=diff/time; //总时间的几分之几
                if(fraction<1) {
                    //绘画未完成
                    if(fraction<0.5){
                        e.style.left=(fraction)*width+"px";
                    }else if(fraction>=0.5){
                        e.style.left=(width/2-(fraction-0.5)*width)+"px";
                    }
                    
                        setTimeout(move,Math.min(25,time-diff));
                    
                }else{
                    animate(window.document.getElementById("block"),500,500);
                }
                
            }
            move();
        }
      var show=function(){
            animate(window.document.getElementById("block"),500,500);
      };

  </script>
  </head>
  <body>
        <button id="show" onclick="show()">
            动画
        </button>
        <div class="container">
            <div id="block">
            </div>
        </div>

  </body>