关闭

使元素e左右震动

标签: javascriptcss
104人阅读 评论(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){ //作为动画完成比例的函数,计算ex位置 //使用正玄函数将完成的比例乘以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>
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1645次
    • 积分:143
    • 等级:
    • 排名:千里之外
    • 原创:13篇
    • 转载:3篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档