JS Roulette Draw Example Analysis _javascript skills

Now learning the transition effect, has begun to do animation effect of consciousness, will achieve some of the more dazzling gadgets, a Web page to add the Transition animation effect, will make people look very beautiful, not stiff, there is worth seeing, animation is a Web page beautiful one of the main embodiment of the following to make a use of a transition effect of the lottery example.

First Effect chart:

This implementation needs to use a number of JS code.

Picture required:

This picture is in the pointer.png position.

Turntable-bg.jpg This is the background map, in the background position.

This one is turntable.png position.

Need these three pictures, if want to realize, directly save these three pictures into it. If not, please change it to the corresponding picture name and put it under the same file.

Code:

<! DOCTYPE html>  

CSS and HTML code are not many, mainly in order to achieve the transition settings, and in order to achieve cascade and use position positioning, so that elements out of the document flow, JS code is to get the elements and events of the click, click the pointer will rotate, so give the pointer to add a click event, and then to determine whether the rotation stopped, If you do not click and can not call the function ratating (), this function to perform the rotation of the turntable and judge where the pointer stops, and then pop-up the corresponding content, and the function of the process of rotation, is to obtain the elements of the turntable, and then use JS to control the properties of CSS-transform:rotate (), we have not used this attribute in the CSS directly to enable it to achieve the effect of rotation? IS and pseudo class selector: hover and Transition properties together to achieve, then because the CSS can not realize the number of operations and mouse clicks, so JS to achieve and control the CSS properties, to achieve the click of the rotation of this function, but the use of the timer does not say, The idea is to use JS to achieve the number of operations and mouse clicks and CSS Properties control to achieve the effect of rotation.
Math.random () is the generation of random numbers, Math.floor () is rounded down.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.