一个简单的转盘抽奖js插件

    这是一个基于jQuery的简单的转盘抽奖js插件，可以自定义转动的度数、转动的时间等。输入抽奖人姓名，点击抽奖按钮后，指针转动并缓缓停下，然后提示抽奖结果。本抽奖插件还提供了PSD，PSD位于images文件夹中。如果觉得界面不美观，完全可以修改PSD。 1、引入css和js

<link rel="stylesheet" type="text/css" href="css/base.css" />
<script src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.rotate.js"></script>

2、加入转盘html代码

<div class="dys-container mt20">
    <div class="dys-row">
        <div class="dys-col-sm-12">
            <div class="zz tc pr">
                <img class="pointer" src="images/2.png" />
                <div class="zp tc">
                    <img class="pointer2" src="images/1.png" />
                </div>
            </div>
        </div>
        <div class="dys-col-sm-12 tc input">
            姓名：<input type="text" value="" name="name"/>
        </div>
    </div>
</div>

3、调用转盘代码

$(function(){
    
    function func(txt,angle,vals){
        $(".pointer2").rotate({
            angle:0,
            animateTo: 1440+angle,
            duration:3000,
            easing: $.easing.easeOutSine,
            callback:function(){
                alert('恭喜'+vals+'获得'+txt)
            }
        });
    }
    
    //45度
    $(".pointer2").rotate({
        bind: {
            click: function(){
                //判读是否输入名字：
                if($(":input").val() == ''){
                    alert('请输入姓名');
                }else{
                    
                    var name = $(":input").val();
                    d = 0;
                    for (var a = 0; a < name.length; a++) {
                        d = d + name.charCodeAt(a);
                    }
                    d = (d % 8);  //块数
                    var num = d * 45 - 22;  //45是单个度数  22是单个度数的一半

                    //判断奖品
                    switch(d){
                        case 1:
                            func('1等奖',num,$(":input").val());
                            break;
                        case 2:
                            func('2等奖',num,$(":input").val());
                            break;
                        case 3:
                            func('3等奖',num,$(":input").val());
                            break;
                        case 4:
                            func('4等奖',num,$(":input").val());
                            break;
                        case 5:
                            func('5等奖',num,$(":input").val());
                            break;
                        case 6:
                            func('6等奖',num,$(":input").val());
                            break;
                        case 7:
                            func('7等奖',num,$(":input").val());
                            break;
                        case 8:
                            func('8等奖',num,$(":input").val());
                            break;
                    }
                }
            }
        }
    })
})

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！