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

来源:https://www.sucaihuo.com/js/3586.html 2018-03-28 16:40浏览(4065) 收藏

一款界面十分美观的手机移动端H5响应式转盘抽奖游戏代码,点击转盘抽奖按钮指针,转盘即会转动,中奖会弹出奖品,可以自定义转盘里面奖品图片。搞微信活动时可以用到。
手机移动端H5响应式转盘抽奖游戏代码
分类:抽奖 > 转盘 难易:入门级
查看演示 下载资源 下载积分: 50 积分

核心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>
声明:本文为原创文章,如需转载,请注明来源sucaihuo.com并保留原文链接:https://www.sucaihuo.com/js/3586.html
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2