使元素e左右震动

原创 2016年05月30日 16:35:33
<!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>

相关文章推荐

图片自适应父元素大小,并左右上下居中的css方法

图片自适应父元素大小,并左右上下居中的css方法前言这种效果多见于矩形盒子里面调用不规则的图片,希望能够达到的效果。这个效果可以很简单的用css来实现,虽然已经烂熟于心,但是并未记录下来。今天看到又有...
  • FungLeo
  • FungLeo
  • 2017年05月10日 13:57
  • 2398

css中div等块元素左右浮动代码测试

改变body块中div块元素的class=s1.s2.s3中  float:left;和float:right;的值来观察实际效果。 代码如下: 巫溪美食网开版倒计时   body{  ...

jquery子元素选择器、form属性选择器和实现可以左右选择的下拉菜单效果

1、:nth-child(index/even/odd/equation) 用法: $(”ul li:nth-child(2)”)   返回值  集合元素       说明: 匹配其父元素下的第...

Swiper.js 实现移动端元素左右滑动

swiper.js也是一个很好用的移动端的js库,需要引入它的css文件和js文件。用法很简单,加入相应的类即可,看一下Demo,很容易看懂。 我的例子如下: Swiper d...

算法与数据结构--在顺序线性表L中查找第1个值与e满足compare()的元素的为序--算法2.5

算法与数据结构--在顺序线性表L中查找第1个值与e满足compare()的元素的为序--算法2.5 分类: 算法与数据结构 C++语言学习2012-09-18 11:02 1336人阅读...

新奔驰E260L融入更多年轻化元素 彰显双重性格

新奔驰E260L融入更多年轻化元素  彰显双重性格 虽然新奔驰E级经历彻底变装,但作为一个汽车媒体人,我更清楚地知道它只是一个中期改款车型。大量年轻化元素的融入为新E级带来更广的受众群体,也让它的双...

【BestCoder Round 65E】【网络流+讨论 奇偶分类思想】n个数形成若干至少3元素素数环的可行性检验 数可以为1

ZYB's Prime    Accepts: 5    Submissions: 89  Time Limit: 2000/1000 MS (Java/Others)    Mem...

数据结构之算法2.6-在顺序线性表L中查找第1个值与e满足compare()的元素的位序

//============================================================================ // Name :algor...

c语言:顺序表的实现(三)将元素e插入到一个递减有序表中,不改变顺序表的递减有序性。

#include #include #define LIST_INIT_SIZE 100 using namespace std; struct Node { int *elem; int Le...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使元素e左右震动
举报原因:
原因补充:

(最多只允许输入30个字)