Development of large rotary draw with jqueryrotate Rotary plug-in

Objective:

The company originally developed a large rotary draw event with Flash I found SWF file unexpectedly 6m big, scare urine!

In fact, it can be written with JS, but its front-end ability is limited, and time is urgent, so the direct use of rotary plug-in is good, compatible with all aspects can be guaranteed.

1, reference jquery.js, Jqueryrotate.2.2.js plug-in 2, HTML code:

 <  div  style  = "width:480px;margin:0 Auto;height:480px;background:url (http://weixin.maotui.cn/ Web/wechat/dazhuanpan/img/2.png) No-repeat; " >  <  img  id  = "Lotterybtn"   Alt  = ""   src  = "Http://weixin.maotui.cn/web/wechat/dazhuanpan/img/1.png"   style  = "MARGIN:157PX;"  />  </ div  >  

3, JS code:

Parameter: angle: Angle

Duration: Duration

Animateto: Total angle of rotation

Callback: Complete execution of the

Method

Stoprotare (): Stop rotation

The Rotate method is as follows:

<Script>    $("#lotteryBtn"). Click (function () {        varAngle=math.random ()*  the; Angle=Math.ceil (angle);//0 to 360 random integer $ ("#lotteryBtn"). Rotate ({//Rotateangle: -, //AngleDuration:6000, //DurationAnimateto:angle+ 2160, //angle is the angle of each prize in the picture, 2160 is I want the pointer to rotate 6 laps. So the final end of the angle is like this ^ ^Callback:function() {Alert (angle+ "Degree duration 6 seconds turn 6 laps! "); Window.location.href=window.location.href;    }        }); });</Script>

Show Address: Big turntable

Effect:

This article copyright belongs to the author (She Jun) and blog Garden All, welcome reprint, reprint please indicate source.

Original address: http://www.cnblogs.com/net-xiejun/

Development Group

Full source Download: https://github.com/xiejun-net/weixin

Public account:

Development of large rotary draw with jqueryrotate Rotary plug-in