实现这个其实蛮简单的，转动的效果用的jqueryRotate插件，所以只要判断每个奖荐对应的角度，然后设置指针的转动角度就可以了。比如关键的是jqueryRotate这个插件的用法。

jqueryRotate的资料：

支持互联网浏览器6.0、火狐2.0、Safari 3、Opera 9、谷歌铬、高级浏览器下使用变换，低版本工程师协会使用VML实现

谷歌代码地址：http://代码。谷歌。com/p/jqueryrotate/

调用和方法：

$(萨尔瓦多).旋转({ angle:0，//起始角度动画：180,//结束的角度工期：500,//转动时间callback:function(){}，//回调函数eas :美元。放松。easeinoutexpo//定义运动的效果，需要引用jquery.easing.min.js的文件})$(el).旋转(45 );//直接这样子调用的话就是变换角度$(萨尔瓦多).getRotateAngle()；//返回对象当前的角度$(萨尔瓦多).stop rotare()；//停止旋转动画另外可以更方便的通过调用$(萨尔瓦多).rotateRight()和$(萨尔瓦多).rotateLeft()来分别向右旋转90度和向左旋转90度。

很简单吧，各种例子可以看这里：http://代码。谷歌。com/p/jqueryrotate/wiki/示例

下面是用jqueryRotate实现的抽奖转盘页面：

！doctype html html ownerta charset=' utf-8 '标题转盘/title style * { padd :0；边距：0}正文{文本-对齐：居中}。ly-plate{位置：相对；宽度宽度：509像素高度：509 px余量： 50px自动；} .旋转-BG { width :509 px；高度：509 px背景：网址(车牌。巴布亚新几内亚)；位置：绝对；top:0left:0 } .车牌区。抽奖-star { width :214 px；高度：214px位置：绝对；top :150 pxleft :147 px/* text-缩进：-999 em；飞越：隐藏；背景： URL(旋转-静态。巴布亚新几内亚)；-web工具包-transform :旋转(0度);*/outline ne : none } .车牌区。彩票之星# LotteryBtn {光标：指针；绝对位置：top :0 left :0 * left :-107px }/style/head body div class=' ly-plate ' div class=' rotate-BG '/div class=' lotch-star ' img src=' http : rotate-static。png ' id=' Lottyribtn '/div/div/body脚本src=' http : jquery-1。7 .2 .量滴js '/script script src=' http 3360 jquerystate。2 .2。超时函数$(' # LottryBtn ').旋转({ angle:0，duration: 10000，animateTo: 2160，//这里是设置请求超时后返回的角度，所以应该还是回到最原始的位置，2160是因为我要让它转6圈，就是360*6得来的callback:function(){ alert('网络超时') } });};var rotateFunc=函数（奖励、角度、文本){//奖励3360奖项，角度：奖项对应的角度，文本：提示文字$(' # LottryBtn ').停止旋转()；$(' # LottryBtn ').旋转({ angle:0，duration: 5000，animateTo:角度1440，//角度是图片上各奖项对应的角度，1440是我要让指针旋转四圈。所以最后的结束的角度就是这样子^^回调：函数(){ alert(text)} })；};$(' # LottryBtn ').rotate({ bind : { click : function(){ var time=[0，1]；时间=时间[数学。地板(数学。random()* time。长度)]；if(TiME==0){ TiME()；//网络超时} if(time==1){ var data=[1，2，3，0]；//返回的数组数据=数据[数学。地板(数学。random()*数据。长度)]；if(data==1){ rotateFunc(1，157)'恭喜您抽中的一等奖)} if(data==2){ rotateFunc(2，247，'恭喜您抽中的二等奖)} if(data==3){ rotateFunc(3，22，'恭喜您抽中的三等奖)}如果(数据==0){ var angle=[67，112，202，292，337]；角度=角度[数学。地板(数学。随机()*角度。长度)]rotatefulnc(0，角度'很遗憾，这次您未抽中奖') } } } } });})/脚本/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！