手机移动端H5响应式转盘抽奖游戏代码

一款界面十分美观的手机移动端H5响应式转盘抽奖游戏代码,点击转盘抽奖按钮指针,转盘即会转动,中奖会弹出奖品,可以自定义转盘里面奖品图片。搞微信活动时可以用到。

核心JS代码

<script type="text/javascript" src="js/vue.min.js"></script> 
        <script type="text/javascript" src="js/awardRotate.js"></script> 
        <script> 
            Vue.component('my-component', { 
                template: '#my-component', 
                props: { 
                    gift: Array, 
                }, 
            }); 
 
            var vue = new Vue({ 
                el:"#app", 
                data:{ 
                    if_tc:false,  //弹窗是否显示 
                    t_type: "",  //弹窗类型 
                    gifts:[ 
                        { 
                            pic:'gift1', 
                            name:'100M', 
                            angles:'' 
                        }, 
                        { 
                            pic:'gift2', 
                            name:'200M', 
                            angles:'' 
                        }, 
                        { 
                            pic:'gift3', 
                            name:'300M', 
                            angles:'' 
                        },{ 
                            pic:'gift4', 
                            name:'400M', 
                            angles:'' 
                        }, 
                        { 
                            pic:'gift5', 
                            name:'500M', 
                            angles:'' 
                        },{ 
                            pic:'gift6', 
                            name:'600M', 
                            angles:'' 
                        }, 
                        { 
                            pic:'gift7', 
                            name:'700M', 
                            angles:'' 
                        }, 
                        { 
                            pic:'gift8', 
                            name:'800M', 
                            angles:'' 
                        } 
 
                    ],  //奖品 
                    result_gift_name:'',  //中奖奖品名 
                    result_gift_pic:'',  //中奖奖品图片 
                    a_bg:'images/bg.jpg', //背景 
                    a_top:'images/top.png', //顶部图 
                    a_zhuanpan_bg:'images/zhuanpan-bg.png',//转盘背景 
                    a_zhuanpan:'images/zhuanpan.png',//转盘图 
                    a_start:'images/start-btn.png',//开始按钮 
                    a_bottom:'images/bottom.png',//底部图 
                    a_rule:'images/rule-show.png',//活动规则图 
                    a_my:'images/my.png',//我的奖品图 
                    a_gift:'images/gift-bg.png' //奖品弹窗 
                }, 
                mounted:function () { 
                    this.fangxiang(); 
                }, 
                computed:{ 
 
                }, 
                methods:{ 
                    fangxiang:function () { 
                        var vm = this, 
                            gift_l = vm.gifts.length, 
                            every_angle = Math.floor(360/gift_l); 
                        for(var i = 0;i<gift_l;i++){ 
                            vm.gifts[i].angles = every_angle/2 + every_angle*i; 
                        } 
 
                    }, 
                    start:function () { 
                        var vm = this, 
                            gift_l = vm.gifts.length, 
                            every_angle = Math.floor(360/gift_l); 
                        var bRotate = false; 
                        var rotateFn = function (awards, angles, txt){ 
                            bRotate = !bRotate; 
                            $('#rotate').stopRotate(); 
                            $('#rotate').rotate({ 
                                angle:0, 
                                animateTo:angles+1800, 
                                duration:8000, 
                                callback:function (){ 
                                    vm.result_gift_name = txt; 
                                    vm.result_gift_pic = 'images/p'+(awards+1)+'.png'; 
                                    vm.t_type='gift'; 
                                    vm.if_tc = true; 
                                    bRotate = !bRotate; 
                                } 
                            }) 
                        }; 
 
        </script>
恭喜,此资源为免费资源,请先
本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
打赏
下载价格:免费
下载说明:本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
0

评论0

请先

没有账号? 忘记密码?

社交账号快速登录