使元素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>

jQuery--元素抖动效果的简单实现

效果:验证错误时,元素左右抖动 实现步骤:1.导入:jquery-1.11.3.min.js 2.被抖动元素...
  • Javer_Lo
  • Javer_Lo
  • 2015年11月21日 15:48
  • 485

Android文本框振动效果的实现

今天尝试了一下文本框的振动效果。一般我们会在输入的时候,要是输入的内容不符合我们的要求的时候,我们可以做一个反馈。很多程序上会有这一个文本输入框的左右反复运动的效果来提示我们输入不符合要求。这个效果其...
  • rentalphang
  • rentalphang
  • 2016年05月09日 22:31
  • 1635

图标左右抖动动画

(usernameImage为imageView) usernameImage.startAnimation(AnimationUtils.loadAnimation(this, R.anim.sha...
  • xinlingchengbao
  • xinlingchengbao
  • 2015年08月20日 15:59
  • 382

VRTK_Example解释

DEMO 1  查询硬件手柄头显 在VRTK插件 的第一个demo   001_CameraRig_VR_PlayArea 案例   这个demo 显示的功能:  按下任一手柄上的按...
  • qq_34552886
  • qq_34552886
  • 2018年01月30日 21:41
  • 52

AndroidEditText添加各种效果抖动-震动-内容变化自动查询

文本框添加各种效果抖动/震动/内容变化自动查询 – 搜索项目输入内容为空查询的蛇形抖动 蛇形抖动在ApiDemos中的Views->Animation->Shake中就有输入内容为空时查询的蛇形抖动....
  • qq_25804863
  • qq_25804863
  • 2015年09月23日 01:55
  • 6049

Android图片的晃动效果

拉手反编译文件里面看到的 先上测试效果图 shake.xml
  • mux22
  • mux22
  • 2015年12月13日 22:40
  • 406

如何使iPhone震动

[翻译] 如何使iPhone震动震动是声音的一种,用如下方式:#import #import - (void)vibrate{    AudioServicesPlaySystemSound(kSys...
  • WTK870424
  • WTK870424
  • 2010年01月07日 10:23
  • 956

div 中进行左右分离

使用float : left and float right. 常见的左右两列div+css布局分为以下两种: 一、左右定宽布局:    在css分别指定了左右两列的宽度的情况下,只需要将左...
  • lzynihao
  • lzynihao
  • 2013年02月19日 09:57
  • 3604

css3 的shake效果,css3抖动窗口 大部分手机浏览器都支持

无标题文档 $(function(){ $("ul li").click(function(){ $("#btn").removeClass().addClass("shake"); v...
  • kongjiea
  • kongjiea
  • 2014年01月02日 11:49
  • 11256

HTML5 元素拖动 - 实现元素左右拖动

1、拖放(Drag 和 drop)是 HTML5 标准的组成部分。   拖放是一种常见的特性,即抓取对象以后拖到另一个位置。在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放...
  • daimomo000
  • daimomo000
  • 2017年02月22日 13:41
  • 329
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使元素e左右震动
举报原因:
原因补充:

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