jquery网页抽奖大转盘效果代码

2016-02-22    编辑:Win2000     点击(
大转盘功能是一个游戏或者活动时会用到的一个效果,以前公司就有做过一个jquery+php的大转盘功能,今天看到一段js就可以实现下面给大家分享一下。

大转盘原理:随机出一个数字,通过后台算出在那个概率区间返回指定跳转的角度 例

一等奖 概率1% 如果在1-100 随机出100则跳转一等奖的角度范围内

二等奖 概率2% 如果在1-100 随机出99-98则跳转二等奖的角度范围内

三等奖 概率97% 如果在1-100 随机出97-1则跳转三等奖的角度范围内

 代码如下 复制代码

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <title>RunJS</title>
        <script  class="jquery library"  src="./jquery-1.8.2.min.js"  type="text/javascript"></script>
        <script  type="text/javascript"  src="./jQueryRotate.2.2.js"></script>
    </head>
    <body>  
    <div  id="lottery"><img  id="imgs"  src="./disc-rotate.gif"  viewbox="0 0 352 30"  style="position: absolute; left: 47px; top: 47px; width: 352px; height: 352px;"  class="image">
                <div  class="arrow"></div>
                <div  class="lot-btn first">
                    <span></span>
                </div>
            </div>

 

        <style>#lottery {
    background: url("./disc-bg.gif") no-repeat scroll 0 0 transparent;
    height: 450px;
    left: 50px;
    position: absolute;
    width: 450px;
}
#lottery .arrow {
    background: url("./arrow.png") no-repeat scroll 0 0 transparent;
    height: 191px;
    left: 207px;
    position: absolute;
    top: 91px;
    width: 32px;
}
#lottery .lot-btn {
    height: 92px;
    left: 177px;
    overflow: hidden;
    position: absolute;
    top: 181px;
    width: 91px;
}
#lottery .lot-btn span {
    cursor: pointer;
    display: block;
    height: 92px;
    position: relative;
    width: 91px;
}

#lottery .first span {
    background: url("./buttons_01.png") no-repeat scroll 0 0 transparent;
}</style>
                <script>$(function() {

    $(".lot-btn").click(function() {

        for (var i = 0; i <= 10000; i++) {

            $("#imgs").rotate({
                animateTo: i,
                duration: 10000
            });
            if (i >= 3986) {

                break;
            }

        }
    })

});</script>

</body></html>

效果如下

'jquery网页抽奖大转盘效果代码'