Shulou(Shulou.com)06/03 Report--

This article mainly explains "how to achieve the shake function of html5". The content of the explanation in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to achieve the shake function of html5".

First, optimize DeviceMotionEvent.

Remove useless code and re-encapsulate DeviceMotionEven

The code is as follows:

If (window.DeviceMotionEvent) {

Var speed = 25 position / define a numeric value

Var x = y = z = lastX = lastY = lastZ = 0 position / reset all values

Window.addEventListener ('devicemotion', function () {

Var acceleration = event.accelerationIncludingGravity;// assigns the sensing value to acceleration

X = acceleration.x

Y = acceleration.y

Z = acceleration.z

If (Math.abs (x-lastX) > speed | | Math.abs (y-lastY) > speed) {

/ / TODO: the data logic operation to be performed after shaking can be realized here

Donghua ()

}

LastX = x

LastY = y

LastZ = z

}, false)

}

Because there are many requirements in the actual project that can not be well implemented.

For example, you cannot continue to execute DeviceMotionEvent events until the animation is finished.

So further optimization has been made.

The code is as follows:

Var frank1

Function donghua () {

/ / Animation event

$(".img") .animate ({left:'0',opacity:'1'}, 700 focus function () {frank1;})

});

If (window.DeviceMotionEvent) {

Var speed = 25 position / define a numeric value

Var x = y = z = lastX = lastY = lastZ = 0 position / reset all values

Window.addEventListener ('devicemotion', function () {

Var acceleration = event.accelerationIncludingGravity;// assigns the sensing value to acceleration

X = acceleration.x

Y = acceleration.y

Z = acceleration.z

If (Math.abs (x-lastX) > speed | | Math.abs (y-lastY) > speed) {

/ / TODO: the data logic operation to be performed after shaking can be realized here

If (frank1) {

Donghua ()

Frank0

}

}

LastX = x

LastY = y

LastZ = z

}, false)

}

Thank you for your reading, the above is the content of "how to achieve the shake function of html5". After the study of this article, I believe you have a deeper understanding of how to achieve the shake function of html5, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.