HTML5 mobile phone shake a shake to achieve

Directory structure



Introduction of Jquery:jquery-1.11.1.min.js

HTML code

<! DOCTYPE html>
Shake.js

/* * Author:alex gibson * https://github.com/alexgibson/shake.js * license:mit license */  (function (global, factory) {    if (typeof define = = = ' function ' && define.amd) {      &N Bsp Define (function () {            return factory (Global, global.document);       );   } else if (typeof module!== ' undefined ' && module.exports) {        Module.exports = Factory (Global, global.document);   } else {        Global. Shake = Factory (Global, global.document);   } (typeof window!== ' undefined '? window:this, Function (window , document) {     ' use strict ';     function Shake (options) {       //f Eature detect        this.hasdevicemotion = ' ondevicemotion ' in window;       &NBS P This.options = {           threshold:15,//default velocity threshold for shake to register          & nbsp timeout:1000//default interval between events       };         if (typeof options = = = ' object ') {            for (var i in options) {        &NBSP ;       if (Options.hasownproperty (i)) {                    This.options[i] = options[i];               }           }       }        //use date to prevent multiple shakes firing        This.lasttime = new Date ();        //accelerometer values    &nbs P   THIS.LASTX = null;        this.lasty = null;        THIS.LASTZ = null;&nbsp ;       //create custom event        if (typeof document. Customevent = = = ' function ') {            this.event = new document. Customevent (' Shake ', {                bubbles:true,        &N Bsp       cancelable:true           });       } else if (t ypeof Document.createevent = = = ' function ') {            this.event = document.createevent (' E Vent ');            this.event.initEvent (' Shake ', true, true);       } E LSE {            return false;       }   }   &nbsp ; Reset Timer values    Shake.prototype.reset = function () {        this.lasttime = new Dat E ();        THIS.LASTX = null;        THis.lasty = null;        THIS.LASTZ = null;   };    //start listening for D evicemotion    Shake.prototype.start = function () {        This.reset ();    &NBSP ;   if (this.hasdevicemotion) {            Window.addeventlistener (' devicemotion ', this , false);       }   };    //stop listening for devicemotion    S Hake.prototype.stop = function () {        if (this.hasdevicemotion) {        &NBS P   Window.removeeventlistener (' devicemotion ', this, false);       }        T His.reset ();   };    //calculates If Shake did occur    Shake.prototype.devicemotion = function (e) {        var current = E.accelerationincludinggravity;&nb Sp       var currenttime;  &nbsP     var timedifference;        var deltax = 0;        var deltay = 0;&nb Sp       var Deltaz = 0;         if ((this.lastx = = = null) && (this.lasty = = = NULL) && (THIS.LASTZ = = = null)) {            THIS.LASTX = current.x;    & nbsp       This.lasty = current.y;            THIS.LASTZ = current.z;            return;       }         DeltaX = Math.Abs (this. Lastx-current.x);        DeltaY = Math.Abs (this.lasty-current.y);        Delta Z = Math.Abs (this.lastz-current.z);         if ((DeltaX > This.options.threshold) &&amp ; (DeltaY > This.options.threshold)) || ((DeltaX > This.options.threshold) && (Deltaz > This.options.threshold)) | |((DeltaY > This.options.threshold) && (Deltaz > This.options.threshold))) {           //calculate time in milliseconds since last shake registered    &nbsp ;       currenttime = new Date ();            timedifference = Currenttime.getti Me ()-this.lastTime.getTime ();             if (Timedifference > This.options.timeo UT) {                window.dispatchevent (this.event);                this.lasttime = new Date ();           }      &NB Sp }         THIS.LASTX = current.x;        this.lasty = current.y;        THIS.LASTZ = current.z;    };    //event handler    Shake.prototy Pe.handleevent = function (e) {      &nbsp if (typeof (This[e.type]) = = = ' function ') {            return This[e.type] (e);       }   };     return Shake;});   demo Address: Http://files.cnblogs.com/files/avivaye/shake.zip

HTML5 mobile phone shake implementation