Shulou(Shulou.com)06/03 Report--

This article introduces how to use jQuery+PHP to achieve the lottery program, the content is very detailed, interested friends can refer to, hope to be helpful to you.

The online raffle procedure has been applied on many websites, and there are various forms of raffle. Before this site, there are articles specifically introducing the common raffle and random raffle. This article will introduce the turntable raffle. A lucky turntable is used to complete the raffle by turning the turntable pointer.

Preparatory work

First of all, to prepare the material, the interface of the lottery uses two pictures, a disc picture and a pointer picture. In practical applications, different disc pictures can be made according to different needs.

Then make the html page. In the example, we add the following code to the body:

We use # disk to place the disc background image, control in css, and # start to place the pointer image start.png.

Then we use CSS to control the position of the pointer and disk, as follows:

.demo {width:417px; height:417px; position:relative; margin:50px auto} # disk {width:417px; height:417px; background:url (disk.jpg) no-repeat} # start {width:163px; height:320px; position:absolute; top:46px; left:130px;} # start img {cursor:pointer}

JQuery

To make the pointer rotate, we can use html5's canvas to rotate the image without flash, but we need to consider browser compatibility, and a jQuery plug-in can rotate the image (any html element) and is compatible with all major browsers, it is jQueryRotate.js.

Using jQueryRotate.js, you can rotate the picture at any angle, bind mouse events, animate the rotation process, and callback callback functions.

Of course, the way to use it is to load the jquery library file and jQueryRotate.js in head, and then we can use the following code to turn the pointer.

$(function () {$("# startbtn") .rotate ({bind: {click:function () {/ / bind click click event var a = Math.floor (Math.random () * 360)) / / generate random number $(this). Rotate ({duration:3000,// rotation interval (rotation speed) angle: 0 duration:3000,// pinch / start angle animateTo:3600+a, / / rotation angle, 10 laps + easing: $.easing.easeOutSine, / / Animation extension callback: function () {/ / callback function alert ('winning!') ;})

The above code realizes: when the pointer "start lottery" button is clicked, the pointer starts to rotate, and the rotation angle is 3600 degrees a, that is, the random angle an is rotated after 10 turns, and stops when the rotation angle reaches 3600 degrees.

It is important to note that easing: animation extension we need to combine animation extension to implement. The easing plug-in is introduced in this article: jQuery Easing Animation effects extension

On how to use jQuery+PHP to achieve the lottery program to share here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.