I saw a lot of big turntable lottery applications on the web page, and I wanted to find some information and I studied it myself.
QueryRotate can implement this function.
JqueryRotate:
Supports Internet Explorer 6.0 +, Firefox 2.0, Safari 3, Opera 9, and Google Chrome. Transform is used in advanced browsers, and VML is used in earlier versions of ie.
Google code: http://code.google.com/p/jqueryrotate/
The following describes how to use this plug-in.
$ ("Trigger rotation element "). rotate (45); // if it is called directly like this, it is to change the angle $ ("trigger rotation element "). getRotateAngle (); // returns the current angle of the object $ ("trigger rotation element "). stopRotare (); // stop rotation animation $ ("trigger rotation element "). rotateRight () rotates 90 degrees to the right $ ("trigger rotation element "). rotateLeft () is rotated 90 degrees left.
$ ("Trigger rotation element "). rotate ({angle: 0, // start angle animateTo: 180, // end angle duration: 3000, // rotation time callback: function (){}, // callback function easing: $. easing. easeOutSine // $. easing. jquery must be referenced for the effect of easeInOutExpo motion. easing. min. js files })
Principle of the big turntable: randomly generates a number and uses the background to calculate the returned angle of the specified jump in that probability range.
First prize probability 1%: If the value ranges from 1 to 100, a random value of 100 will jump to the first prize.
The second prize probability is 2%. If the value ranges from 1 to 100, a random value of 99 to 98 is displayed, the second prize is redirected to the second prize.
The third prize probability is 97%. If a 100-random 97-1 error occurs, the third prize is redirected to the third prize.
The following uses a simple demo as an example.
<script type="text/javascript" src="jquery-1.8.0.min.js"></script><script type="text/javascript" src="jQueryRotate.2.2.js"></script><script type="text/javascript" src="jquery.easing.min.js"></script><script type="text/javascript" src="zp.js"></script><script type="text/javascript">$(function(){$(".rotate-con-zhen").rotate({bind:{click:function(){var a = runzp(); $(this).rotate({ duration:3000, angle: 0, animateTo:1440+a.angle,easing: $.easing.easeOutSine,callback: function(){alert(a.prize+a.message);} });}}});});</script>
Zp. js
/*************************************** * ************** Author: xuyw ** Version: v1.0 ** Email: *************************************** * ************/function randomnum (smin, smax) {// obtain the random number var Range = smax-smin between two values; var Rand = Math. random (); return (smin + Math. round (Rand * Range);} function runzp () {var data = '[{"id": 1, "prize": "590 Ocean", "v ": 1.0 },{ "id": 2, "prize": "100RMB", "v": 2 . 0 },{ "id": 3, "prize": "Consolation prize", "v": 48.0}] '; // award jsonvar obj = eval ('+ data +'); var result = randomnum (1,100); var line = 0; var temp = 0; var returnobj = "0"; var index = 0; // alert ("random number" + result); for (var I = 0; I <obj. length; I ++) {var obj2 = obj [I]; var c = parseFloat (obj2.v); temp = temp + c; line = 100-temp; if (c! = 0) {if (result> line & result <= (line + c) {index = I; // alert (I + "win" + line +"
First, the turntable angle depends on the image, and the turntable's business determines the Code complexity. I hope you can develop and attach my small turntable according to your actual situation.
Http://pan.baidu.com/s/1kT6xtUv