使元素e左右震动

最新推荐文章于 2023-08-04 20:22:28 发布

slash1993

最新推荐文章于 2023-08-04 20:22:28 发布

阅读量308

点赞数

分类专栏： javascript 文章标签： javascript css

本文链接：https://blog.csdn.net/slash1993/article/details/51539002

版权

javascript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div1 {
            width: 200px;
            height: 200px;
            background: green;
        }
    </style>
    <Script>
        window.onload = function(){
            //将e转化为相对定位的元素，使之左右“震动”
            //第一个参数可以是元素对象或者是元素的id
            //如果第二个参数是函数，以e为参数，它将在动画结束时候调用
            //第三个参数指定e震动的距离，默认是5毫米
            //第四个参数指定震动多久，默认是500毫秒
            function shake(e,oncomplete,distance,time){
                if(e==="string") e = document.getElementById(e);
                if(!distance) distance = 5;
                if(!time) time = 500;

                var originalStyle = e.style.cssText;            //保存e的原始style
                e.style.position = "relative";                  //使e相对定位
                 var start = (new Date()).getTime();             //动画的开始时间
                 animate();                                      //动画开始

                 //函数检查消耗的时间，更新e的位置
                 //动画完成将e还原成原始状态
                 //否则,更新e的位置，安排它自身重新运作
                 function animate(){
                    var now = (new Date()).getTime();           //得到当前时间
                      var elapsed = now - start;                  //从开始以来消耗了多长时间
                      var fraction = elapsed/time;                //是总时间的几分之几
                      if(fraction<1){
                      //作为动画完成比例的函数，计算e的x位置
                        //使用正玄函数将完成的比例乘以4PI
                      //所以它来回往复两次
                       var x = distance*Math.sin(fraction*4*Math.PI);
                     e.style.left = x +"px";

                      //在25毫秒后或者在总时间的最后再次尝试运行函数
                        //目的是为了产生每秒40帧的动画
                       setTimeout(animate,Math.min(25,time-elapsed));
                     }else{                  //否则动画完成
                          e.style.cssText = originalStyle;
                        if(oncomplete) oncomplete(e);           //调试完成后的回调函数
                    }
                }
            }
            var oBtn = document.getElementById('btn');
            var oDiv = document.getElementById('div1');
            oBtn.onclick =  function(){
                shake(div1)
            }

        } ;
    </Script>
</head>
<body>
    <input id="btn" type="button" value="抖动">
    <div id="div1"></div>


</body>
</html>


<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        #div1 {            width: 200px;            height: 200px;            background: green;        }    </style>    <Script>        window.onload = function(){            //将e转化为相对定位的元素，使之左右“震动”            //第一个参数可以是元素对象或者是元素的id            //如果第二个参数是函数，以e为参数，它将在动画结束时候调用            //第三个参数指定e震动的距离，默认是5毫米            //第四个参数指定震动多久，默认是500毫秒            function shake(e,oncomplete,distance,time){                if(e==="string") e = document.getElementById(e);                if(!distance) distance = 5;                if(!time) time = 500;                var originalStyle = e.style.cssText;            //保存e的原始style                e.style.position = "relative";                  //使e相对定位                 var start = (new Date()).getTime();             //动画的开始时间                 animate();                                      //动画开始                 //函数检查消耗的时间，更新e的位置                 //动画完成将e还原成原始状态                 //否则,更新e的位置，安排它自身重新运作                 function animate(){                    var now = (new Date()).getTime();           //得到当前时间                      var elapsed = now - start;                  //从开始以来消耗了多长时间                      var fraction = elapsed/time;                //是总时间的几分之几                      if(fraction<1){                      //作为动画完成比例的函数，计算e的x位置                        //使用正玄函数将完成的比例乘以4PI                      //所以它来回往复两次                       var x = distance*Math.sin(fraction*4*Math.PI);                     e.style.left = x +"px";                      //在25毫秒后或者在总时间的最后再次尝试运行函数                        //目的是为了产生每秒40帧的动画                       setTimeout(animate,Math.min(25,time-elapsed));                     }else{                  //否则动画完成                          e.style.cssText = originalStyle;                        if(oncomplete) oncomplete(e);           //调试完成后的回调函数                    }                }            }            var oBtn = document.getElementById('btn');            var oDiv = document.getElementById('div1');            oBtn.onclick =  function(){                shake(div1)            }        } ;    </Script></head><body>    <input id="btn" type="button" value="抖动">    <div id="div1"></div></body></html>

slash1993

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使元素e左右震动

html>html lang="en">head> meta charset="UTF-8"> title>title> style> #div1 { width: 200px; height: 200px; background: green; } styl
复制链接

扫一扫