首页 网站特效 PHP/Mysql 网站模板 视频教程 整站源码 云服务器 免责声明

素材码 > 抽奖 > 一款jQuery仿老虎机游戏机滚动抽奖代码

一款jQuery仿老虎机游戏机滚动抽奖代码

更新时间:2019-03-24
357058607
一款jQuery仿老虎机游戏机滚动抽奖代码 应用简介

jQuery仿老虎机游戏机滚动抽奖代码是一款类似老虎机的抽奖游戏,点击PLAY按钮开始抽奖,三排图标滚动到停止得出抽奖结果。

js代码

<script src="js/jquery.min.js"></script> 
<script src="js/easing.js"></script> 
<script> 
    //随机数(停的位置) 
    function numRand() { 
//           图片 每个图片 6个选项 
        var arr = ["0""1""2""3""4""5"
        var res = ""
        for (var i = 0; i < 3; i++) { 
            var rnd = Math.floor(Math.random() * arr.length); 
            res += arr[rnd]; 
            arr.splice(rnd, 1
        } 
        return res 
    } 
    function Lottery() { 
        var isBegin = false; 
        var u = 150
        if (isBegin) return false; 
        isBegin = true; 
        $(".tiger").css('backgroundPositionY'0); 
        //一等奖 052 二等奖230 三等奖413 
//            var result = "413"; 
        var result = numRand(); 
        console.log(result) 
        var num_arr = (result + '').split(''); 
        console.log(num_arr) 
        $(".tiger").each(function (index) { 
            var _num = $(this); 
            setTimeout(function () { 
                _num.animate({ 
                    backgroundPositionY: (u * 60) - (u * num_arr[index]) 
                }{ 
                    duration: 6000 + index * 3000
                    easing: "easeInOutCirc"
                    complete: function () { 
                        isBegin = false; 
                        if (index == 2{ 
//                                抽奖结束 启动按钮 可再次抽奖 
                            $(".play").attr("disabled", false) 
                        } 
                    } 
                }); 
            }, index * 300); 
        }); 
    } 
    $('.play').click(function () { 
//            点击抽奖的时候 不可立刻再次点击 此时禁用按钮 
        $(this).attr("disabled", true); 
        Lottery() 
    }); 
</script>


  • 收藏
  • 投诉
评论列表
noters日期:2019-05-08 11:23:31

这个不错,收下了,正好用上