头像

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

来源:http://www.sucaihuo.com/js/3586.html 天生***桥, 2018-03-28 16:40浏览(1899) 收藏

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

程序员,你不是一个人;网站开发QQ群:698377651,在线充值,或联系QQ1556472052直接充值

查看演示 下载资源: 38

手机扫码访问:

下载资源 下载积分: 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并保留原文链接:http://www.sucaihuo.com/js/3586.html
最新交易
评论20
头像

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

  • 头像 19楼
    05-01 21:44
    起***户
    详细解析,还不错
  • 头像 18楼
    04-19 23:44
    ★***★
    霸屏的效果,一直比较流行的前端效果
  • 头像 17楼
    04-13 20:41
    许y***繁华
    这个应该不错,感谢
  • 头像 16楼
    04-09 11:29
    he***xx

    谢大神分享……
  • 头像 15楼
    04-09 00:11
    心***扬
    非常经典的抽奖形式,感谢大神分享……
  • 头像 14楼
    04-08 11:26
    赵-***ng
    基于VUE的,不错比普通的好。
  • 头像 13楼
    04-08 11:21
    天***桥
    已下载,赞一个,转盘很好
  • 头像 12楼
    04-03 16:11
    清***兮
    抽奖的demo还不错,希望以后分出点
  • 头像 11楼
    04-02 19:26
    沐***李
    谢大神分享 移动端的太经典了
  • 头像 10楼
    04-02 14:02
    流***影
    正好可以用vue来练练手,不错!
1 2