How to realize the click-and-launch animation of small ball by jQuery

Editor to share with you how jQuery to achieve the ball click launch animation, I hope you have something to gain after reading this article, let's discuss it together!

Spent two hours using jQuery to write a small animation game, as shown in the following picture, with a mouse click to launch the ball.

Code:

# main {width: 500px; height: 650px; border: 3px solid # efefef; margin: 30px auto; position: relative;} # fireSpace {width: 100%; height: 400px; position: absolute; top: 0 Left: 0;} # gun {display: block; width: 60px; height: 60px; position: absolute; bottom: 20px; left: 50%; transform: translate (- 50%, 0);}

Let initX = 0, initY = 300, initDeg = 90, thenDeg, gunX, gunY, boo, x = 0, y = 300, nx, ny, dg = 90, ndg, rdg, isLeft0, isLeft; document.getElementById ("fireSpace"). Onmousemove = function (e) {if (e.offsetX-220 > = 0) {/ / nx = e.offsetX-220 / ny = 600mure.offsetY; gunX = e.offsetX-220; isLeft = false;} else if (e.offsetX-220 = 0? (90-Math.asin (gunX / gunY) * 180 / Math.PI): (Math.asin (gunY / gunX) * 180 / Math.PI); / / thenDeg = Math.asin (gunY / gunX) * 180 / Math.PI } if (initX-220 = = 0) {initDeg = 90;} else {initDeg = initY-initX > = 0? (90-Math.asin (initX / initY) * 180 / Math.PI): (Math.asin (initY / initX) * 180 / Math.PI);} if (initY)