准备工作
首先要准备素材,抽奖的界面用到两张图片,圆盘图片和指针图片,实际应用中可以根据不同的需求制作不同的圆盘图片。
接着制作html页面,实例中我们在body中加入如下代码:
<div class=”demo”>
<div id=”disk”></div>
<div id=”start”><img src=”start.png” id=”startbtn”></div>
</div>
css
.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}
js
载入jquery库文件以及jQueryRotate.js
$(function(){
$(“#startbtn”).rotate({
bind:{
click:function(){//绑定click单击事件
var a = Math.floor(Math.random() * 360); //生成随机数
$(this).rotate({
duration:3000,//转动时间间隔(转动速度)
angle: 0, //开始角度
animateTo:3600+a, //转动角度,10圈+
easing: $.easing.easeOutSine, //动画扩展
callback: function(){ //回调函数
alert(‘中奖了!’);
}
});
}
}
});
});
到此已完成了转盘转动指针的过程,但是需要结合抽奖控制才算一个完整的抽奖程序
大转盘抽奖(使用PHP来控制抽奖几率)下载:http://pan.baidu.com/s/1BpHp8