简易的jQuery九宫格抽奖代码

来源:http://www.phprr.com/show-1599 2019-11-07 10:16:49浏览() 收藏

一款简易的jQuery九宫格抽奖代码,样式比较粗糙,可自行进一步美化。注:加载外部json数据文件,本地预览会有跨域问题,请在服务端查看演示效果。
简易的jQuery九宫格抽奖代码
分类: >网站特效 >抽奖
查看演示 下载资源: 0 下载资源 下载积分: 30 积分

js代码

<script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> 
<script src="encryption-win.js"></script> 
<script> 
    $(function () { 
 
        document.querySelector('#me').addEventListener('click'function () { 
            $.ajax({ 
                url: './winData.json'
                method: 'get'
                success: function (data) { 
                    new Win({ 
                        el: '.lottery'//抽奖元素的父级 
                        startIndex: 1//从第几个位置开始抽奖 [默认为零] 
                        totalCount: 4//一共要转的圈数 
                        // winningIndex: data.win, //中奖的位置索引[1-8] 后台返回的中奖数字 
                        winningIndex: 3//模拟写死的,实际效果可接受后台返回 
                        speed: 50 //抽奖动画的速度 [数字越大越慢,默认100] 
                    }function () {  //中奖后的回调函数 
                        //do something 
                        $('.lottery li').each(function () { 
                            if ($(this).hasClass('active')) { 
                                //打印当前中奖信息 
                                console.log($(this).html()); 
                                $('.prize').html($(this).html()); 
                            } 
                        }); 
                    }); 
                } 
            }); 
        }
    });//end function 
</script>


友情提醒:源码仅供学习 不得用于其他用途,下载者用于违法用途,本站不承担任何责任

腾讯云服务器安全可靠高性能,多种配置供您选择

https://cloud.tencent.com/redirect.php?redirect=1001&cps_key=b685b398d3e704662203733b89accc52&from=console

阿里云服务器安全可靠高性能,多种配置供您选择

https://promotion.aliyun.com/ntms/act/qwbk.html?userCode=geqqrf2n

最新交易
评论0
头像

评论后赠送5积分,下载出错或者资源有问题请联系全栈客服QQ 357058607

1 2