jQuery幸运水果机

收藏

分享一个水果老虎机插件，该插件写的很简单，你要是想让效果更酷，可以使用本站的lottery插件（搜索本站抽奖关键字）。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

游戏区域

<table border="0" cellpadding="0" cellspacing="1">
    <tr>
        <td id="0" style="background:url(images/0.png);background-size:cover;"></td>
        <td id="1" style="background:url(images/1.png);background-size:cover;"></td>
        <td id="2" style="background:url(images/2.png);background-size:cover;"></td>
        <td id="3" style="background:url(images/3.png);background-size:cover;"></td>
        <td id="4" style="background:url(images/4.png);background-size:cover;"></td>
        <td id="5" style="background:url(images/5.png);background-size:cover;"></td>
        <td id="6" style="background:url(images/6.png);background-size:cover;"></td>
    </tr>
    <tr>
        <td id="19" style="background:url(images/19.png);background-size:cover;"></td>
        <td colspan="5" rowspan="3" style="background:#66cc33;text-align:center;position:relative;">
            <div class="Img"></div>
            <div class="button staBtn" onclick="startRun()">开始抽奖</div>
            <div class="button czBtn" onclick="init()">重置</div>
        </td>
        <td id="7" style="background:url(images/7.png);background-size:cover;"></td>
    </tr>
    <tr>
        <td id="18" style="background:url(images/18.png);background-size:cover;"></td>
        <td id="8" style="background:url(images/8.png);background-size:cover;"></td>
    </tr>
    <tr>
        <td id="17" style="background:url(images/17.png);background-size:cover;"></td>
        <td id="9" style="background:url(images/9.png);background-size:cover;"></td>
    </tr>
    <tr>
        <td id="16" style="background:url(images/16.png);background-size:cover;"></td>
        <td id="15" style="background:url(images/15.png);background-size:cover;"></td>
        <td id="14" style="background:url(images/14.png);background-size:cover;"></td>
        <td id="13" style="background:url(images/13.png);background-size:cover;"></td>
        <td id="12" style="background:url(images/12.png);background-size:cover;"></td>
        <td id="11" style="background:url(images/11.png);background-size:cover;"></td>
        <td id="10" style="background:url(images/10.png);background-size:cover;"></td>
    </tr>
</table>

点击开始转动

var n = 0;
init();
function init() {
    moveToNext(0);
}
function moveToNext(i) {
    var $target = $('div.target');//代表找到div.target的元素
    var offset = $('#' + (i % 20)).offset();
    $target.animate({top: offset.top - 2, left: offset.left - 2}, 50);
    n = i;
}
function startRun() {
    var randomNumber = Math.random(10) * 20;//随机生成0-20之间的数字
    randomNumber = Math.ceil(randomNumber) + 50;//+上一个50的基数
    var m = n;
    for (var i = m; i < randomNumber + m; i++) {
        moveToNext(i);
    }
}