Method for shaking through HTML5

Xiao Bian to share with you a method to achieve Shake function through html5, I hope you’ve read this article after the big harvest, let’s go explore it!

principle: use DeviceMotion achieve, you can view the presentation on DeviceMotion
https://developer.mozilla.org/en-US/docs/Web/Reference/Events/devicemotion

by DeviceMotionEvent, can be obtained accelerationIncludingGravity the x, y, z attribute to judge a change x, y, z whether the device has the property shake events.

accelerationIncludeingGravity Description:.
The acceleration of the device This value includes the effect of gravity, and may be the only value available on devices that do not have a gyroscope to allow . them to properly remove gravity from the data

Code as follows:

       HTML5 DeviceMotionEvent implemented using shake   .center {position: absolute; width: 640px; height: 480px; left: 50%; top: 50%; margin-left: -320px; margin-top: -240px; line-height: 480px; text-align: center; font-size: 100px;} .NORMAL {Background: # 000000;} .normal.txt {color: #ffff;} .doing {background: # ff0000; .doing.txt {color: # fff00;}    Please perform shake 

var doing = 0; // Judgment whether it is in animation display Var speed = 23; // Defines the speed value var Lastx = 0; var lastz = 0; function handleMotionEvent (Event) {var x = event.accelerationincludinggravity.x; var y = event.accelerationincludinggravity.y Var z = event.accelerationincludinggravity.z; if (doing == 0) {if (Math.abs (x-lastx)> speed || math.abs (y-lasty)> speed) {doing = 1; show (SHOW) }} Lastx = x; Lasty = Y; LASTZ = z;} functioN show () {document.GtelementByid ('mybody'). ClassName = 'doing'; document.getlementById ('txt'). Innerhtml = 'executed shake'; setTimeout (function () {doing = 0; document .getElementById ( 'mybody') className = 'normal';. document.getElementById ( 'txt') innerHTML = 'do shake';.}, 3000);} window.addEventListener ( "devicemotion", handleMotionEvent, true
After reading this article, I believe that you have a certain understanding of the functionality of html5, you want to know more Knowledge, welcome to pay attention to Tumi Yun Industry Information Channel, thank you for reading!
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment