Js grand turntable Lottery

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.