大转盘抽奖

准备工作
首先要准备素材,抽奖的界面用到两张图片,圆盘图片和指针图片,实际应用中可以根据不同的需求制作不同的圆盘图片。
接着制作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

发表评论

邮箱地址不会被公开。 必填项已用*标注