Many companies at the end of the year will do some lottery activities to stimulate, attract, adhere to customers, such as the lottery turntable activities.
A few days ago with a jqueryrotate plug-in to achieve the effect of the turntable. Compared to those flashy flash is less than the point, but also basically achieve the requirements
Effect Chart:
To achieve this is actually quite simple, rotating the effect of the Jqueryrotate plug-in, so as long as the judge each award of the corresponding angle, and then set the rotation angle of the pointer can be. For example, the key is to jqueryrotate the usage of this plugin.
Jqueryrotate's information:
Support Internet Explorer 6.0+, Firefox 2.0, Safari 3, Opera 9, Google Chrome, advanced browser to use transform, low version of IE using VML implementation
Google Code address: http://code.google.com/p/jqueryrotate/
Calls and methods:
$ (EL). Rotate ({
angle:0,///Starting angle
animateto:180,//End angle
duration:500,//rotation time
callback:f Unction () {},//callback function
easing: $.easing.easeinoutexpo//define the effect of motion, need to reference jquery.easing.min.js file
})
$ (EL). Rotate (45); This is the right way to change the angle.
$ (EL). Getrotateangle (); Returns the current angle of an object
$ (EL). Stoprotare (); Stop rotation animation
It is also more convenient to rotate 90 degrees to the right and 90 degrees to the left by calling $ (EL). Rotateright () and $ (EL). Rotateleft () respectively.
Quite simply, all kinds of example can be seen here: http://code.google.com/p/jqueryrotate/wiki/Examples
The following is a lottery dial page implemented with Jqueryrotate:
<!doctype html>
Here the time and data is to be obtained from the background, but here is only static page, so I use the random random number to try to simulate the process of the lottery.
The time parameter indicates whether the request was successful from the background, 0 is the request timeout, and 1 is the success of the request (the return value is judged after success);
Data is the request to return the 1,2,3, said the 123 prize, 0 is not winning, according to the returned data, then set the angle of the rotation of the pointer.
Because the angle of this picture can not be calculated by formula, so can only be calculated after the death.
If you compare rules, you should be able to calculate them with formulas.
In fact, rarely in the foreground, others write good plug-ins, we take to use on the good, really difficult is in the background, set a what kind of rules, make a what kind of algorithm, we go to think about it ~ ~ ~
Click to download full demo
The above is the entire content of this article, I hope to give you a reference, but also hope that we support the cloud habitat community.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
