精华内容
下载资源
问答
  • # 九宫格抽奖游戏 本项目在github [链接]([https://github.com/freya0608/squaredUp](https://github.com/freya0608/squaredUp) 1. 前端布局 将未选中的和选中的图片定位好 <div class="nomal"> <...

    # 九宫格抽奖游戏

    本项目在github [链接]([https://github.com/freya0608/squaredUp](https://github.com/freya0608/squaredUp)


     

    1.  前端布局


    将未选中的和选中的图片定位好

    <div class="nomal">
        <img class="quanNomal quan0" src="./img/quan0.png" alt="">
        <img class="quanNomal quan1" src="./img/quan1.png" alt="图片">
        <img class="quanNomal quan2" src="./img/quan2.png" alt="图片">
        <img class="quanNomal quan7" src="./img/quan7.png" alt="图片">
        <div class="chou-tap">
            <img class="chou"  src="./img/chou.png" alt="图片">
        </div>
        <img class="quanNomal quan3" src="./img/quan3.png" alt="图片">
        <img class="quanNomal quan6" src="./img/quan6.png" alt="图片">
        <img class="quanNomal quan5" src="./img/quan5.png" alt="图片">
        <img class="quanNomal quan4" src="./img/quan4.png" alt="图片">
    </div>
    <div class="quan-border">
        <img class="quanq quan0_1" src="./img/quan0_1.png" alt="图片">
        <img class="quanq quan1_1" src="./img/quan1_1.png" alt="图片">
        <img class="quanq quan2_1" src="./img/quan2_1.png" alt="图片">
        <img class="quanq quan7_1" src="./img/quan7_1.png" alt="图片">
        <img class="quanq quan3_1" src="./img/quan3_1.png" alt="图片">
        <img class="quanq quan6_1" src="./img/quan6_1.png" alt="图片">
        <img class="quanq quan5_1" src="./img/quan5_1.png" alt="图片">
        <img class="quanq quan4_1" src="./img/quan4_1.png" alt="图片">
    </div>
    ```
     图片定位的时候,class按照逆时针0.1.2.3.4.5.6.7,这样,在旋转的时候,可以容易控制图片
     `quan5_1.png`表示选中图片的样式;`quan5.png`没有选中图片的样式
    ```
    $(".nomal").css({
        height:$(".nomal").width(),
        zIndex:1
    });
    $(".quan-border").css({
        height:$(".quan-border").width()
    });
    $(".quan0").css({"left":"9%","top":'10%'});
    $(".quan0_1").css({"left":"9%","top":'10%'});
    $(".quan1").css({"left":"37%","top":'10%'});
    $(".quan1_1").css({"left":"37%","top":'10%'});
    $(".quan2").css({"left":"65%","top":'10%'});
    $(".quan2_1").css({"left":"65%","top":'10%'});
    $(".quan7").css({"left":"9%","top":'37%'});
    $(".quan7_1").css({"left":"9%","top":'37%'});
    $(".quan3").css({"left":"65%","top":'37%'});
    $(".quan3_1").css({"left":"65%","top":'37%'});
    $(".quan6").css({"left":"9%","top":'64%'});
    $(".quan6_1").css({"left":"9%","top":'64%'});
    $(".quan5").css({"left":"37%","top":'64%'});
    $(".quan5_1").css({"left":"37%","top":'64%'});
    $(".quan4").css({"left":"65%","top":'64%'});
    $(".quan4_1").css({"left":"65%","top":'64%'});

     2 .  逻辑端处理
     

    let end,round= 2,ms = 150; //round表示转几圈后开始抽奖,ms控制抽奖转圈速度,//end表示抽到的积分或者券
    var flag = true;   //防止重复点击
    $(".chou-tap").click(function (e) {
        console.log('click')
        e.preventDefault();
     if(!flag){
      return;
     }
     flag = false; // 设
     //end表示抽到的位子
      end = 5;
        getPrize(0,end,round,ms);
        function getPrize(start,end,round,interval){
            var nowNum = start;
            var myRound = round;
            rotation();
            function rotation(){
                if( myRound > 0 ){
                    setTimeout(function(){
                        nowNum++;
                        if(nowNum > 7){
                            nowNum = 0;
                            myRound--;
                        }
                        // console.log('block',$('.quan'+nowNum+"_1"))
                        $('.quan'+nowNum+"_1").css({"display":"block","zIndex": 2});
                        $('.quan'+nowNum+"_1").siblings().css({"display":"none"}); //没有选中的不显示
                        // console.log('nowNum:',nowNum,'myRound:',myRound);
                        rotation();     //递归调用
                    },interval);
                }else if(myRound === 0){  //最后一圈的时候
                    setTimeout(function(){
                        // console.log('nowNum:',nowNum,'myRound:',myRound);
                        $('.quan'+nowNum+"_1").css({"display":"block","zIndex": 2});
                        $('.quan'+nowNum+"_1").siblings().css({"display":"none"});
                        if( nowNum != end ){
                            nowNum++;
                            rotation();  //在最后一圈,但是还没有到达想要的位置,继续递归。
                        }else{
    
                            //这里写弹窗
                            flag = true;
    
                            return null;
                        }
                    },interval)
                }
            }
        }
    
    });

     

    展开全文
  • 九宫格抽奖是H5常见的抽奖活动。在线上找不到合适的插件,那么就自己造了个轮子,不喜请喷。文末有DEMO。

    九宫格抽奖是H5常见的抽奖活动。在线上找不到合适的插件,那么就自己造了个轮子,不喜请喷。

    下面贴了源代码,方便大家修改,有好的建议也欢迎大家提出来。

    
    ;(function($){
        var Fn=function(options){
            var self=this;
            self.def={
                html:'',    //抽奖效果,添加HTML标签
                hoverClass:'',  //抽奖效果,在TD添加样式
                startTime:50,  //起始延迟时间
                onlyTime:2,     //延迟时间间隔
                endTime:500,    //最后出结果的延迟时间
                id:'',          //抽奖按钮ID,JQ选择器语法
                way:'click',    //按钮绑定的事件,默认点击事件
                cycle:3,        //九宫格循环次数
                start:5,        //九宫格起始位置
                arr:[0,1,2,5,8,7,6,3],  //九宫格循环方向,默认顺时针
                runBefor:function(){    //抽奖之前的函数,返回中奖位置,默认为第一格,返回false结束抽奖
                    return 0;
                },
                callBack:function(i){   //回调函数
    //                alert(i);
                }
            };
            self.ops = $.extend(self.def,options);
        };
    //抽奖
        Fn.prototype.timeFn=function(s){
            var self=this;
            var times=self.ops.startTime+(self.ops.count-s)*self.ops.onlyTime*(self.ops.cycle-s/8); //计算延时时间:起始时间+离结束的间隔*间隔时间*圈数差的倍数
                if(s==1){
                    times+=self.ops.endTime;
                }
            if(self.ops.start>7){
                self.ops.start=self.ops.start-8;
            }
            self.tClass();
            if(s==0){
                self.ops.callBack(self.ops.start);
                $(self.ops.id).one(self.ops.way,function(){
                    self.run(self.ops.runBefor());
                });
                return ;
            }
            setTimeout(function(){
                self.ops.tdArr.eq(self.ops.arr[self.ops.start]).removeClass(self.ops.hoverClass);
                self.ops.tdArr.eq(self.ops.arr[self.ops.start]).find('#tableLotteryId_0001').remove();
                ++self.ops.start;
                s--;
                self.timeFn(s);
            },times);
        };
    //抽奖-切换效果
        Fn.prototype.tClass=function(){
            var self=this;
            var index=self.ops.arr[self.ops.start];
            if(self.ops.html){
                self.ops.tdArr.eq(index).find('#tableLotteryId_0001').remove();
                self.ops.tdArr.eq(index).append(self.ops.html);
                self.ops.tdArr.eq(index).find('*').last().attr('id','tableLotteryId_0001');
            }
            self.ops.tdArr.eq(index).addClass(self.ops.hoverClass);
        };
    //计算遍历多少格,执行抽奖
        Fn.prototype.run=function(status){
    		$(this.ops.id).off(this.ops.way);
            var ops=this.ops;
            if(typeof status =='number'&&status>=0){
                status=parseInt(status);
            }else{
                return ;
            }
            ops.count=8*ops.cycle+(8-ops.start+status);
            var s=ops.count;
            this.timeFn(s);
        };
    
        Fn.prototype.init=function(my){
            var self=this;
            self.ops.tdArr=my.find('td');
            $(self.ops.id).one(self.ops.way,function(){
                self.run(self.ops.runBefor());
            })
        };
    
        $.fn.tableLottery=function(options){
            var my=$(this).eq(0);
            var myTableLottery=new Fn(options);
            myTableLottery.init(my);
            return myTableLottery;
        };
    
    })(jQuery);

    调用方式:

    $(document).ready(function(){
    //这是可以配置的所有参数
            var ops={
                html:'<div class="testModal"></div>',    //抽奖效果,添加HTML标签
                hoverClass:'testClass',  //抽奖效果,在TD添加样式
                startTime:50,  //起始延迟时间
                onlyTime:2,     //延迟时间间隔
                endTime:500,    //最后出结果的延迟时间
                id:'#go',          //抽奖按钮ID,JQ选择器语法
                way:'click',    //按钮绑定的事件,默认点击事件
                cycle:3,        //九宫格循环次数
                start:5,        //九宫格起始位置
                arr:[0,1,2,5,8,7,6,3],  //九宫格循环方向,默认顺时针
                runBefor:function(){    //抽奖之前的函数,返回抽奖结果,返回false结束抽奖
                    var d=new Date();
                    d= d.getTime();
                    return d%7;
                }
            };
    
            var test=$("table").tableLottery(ops);
            test.run(5);//也可以这样抽奖
    
        });
    html可以按照自己的UI去设置只要求表格是3*3的九宫格就行。
    DEMO的链接可以看 点击这里


    展开全文
  • 九宫格抽奖游戏本项目在github 链接前端布局将未选中的和选中的图片定位好 图片定位的时候,class按照逆时针0.1.2.3.4.5.6.7,这样,在旋转的时候,可以容易控制图片quan5_1.png表示选中图片的样式;quan5.png没有...

    九宫格抽奖游戏

    本项目在github 链接

    前端布局

    将未选中的和选中的图片定位好

    图片

    图片

    图片

    图片

    图片

    图片

    图片

    图片

    图片

    图片

    图片

    图片

    图片

    图片

    图片

    图片

    图片定位的时候,class按照逆时针0.1.2.3.4.5.6.7,这样,在旋转的时候,可以容易控制图片

    quan5_1.png表示选中图片的样式;quan5.png没有选中图片的样式

    $(".nomal").css({

    height:$(".nomal").width(),

    zIndex:1

    });

    $(".quan-border").css({

    height:$(".quan-border").width()

    });

    $(".quan0").css({"left":"9%","top":'10%'});

    $(".quan0_1").css({"left":"9%","top":'10%'});

    $(".quan1").css({"left":"37%","top":'10%'});

    $(".quan1_1").css({"left":"37%","top":'10%'});

    $(".quan2").css({"left":"65%","top":'10%'});

    $(".quan2_1").css({"left":"65%","top":'10%'});

    $(".quan7").css({"left":"9%","top":'37%'});

    $(".quan7_1").css({"left":"9%","top":'37%'});

    $(".quan3").css({"left":"65%","top":'37%'});

    $(".quan3_1").css({"left":"65%","top":'37%'});

    $(".quan6").css({"left":"9%","top":'64%'});

    $(".quan6_1").css({"left":"9%","top":'64%'});

    $(".quan5").css({"left":"37%","top":'64%'});

    $(".quan5_1").css({"left":"37%","top":'64%'});

    $(".quan4").css({"left":"65%","top":'64%'});

    $(".quan4_1").css({"left":"65%","top":'64%'});

    2 . 逻辑端处理

    let end,round= 2,ms = 150; //round表示转几圈后开始抽奖,ms控制抽奖转圈速度,//end表示抽到的积分或者券

    var flag = true; //防止重复点击

    $(".chou-tap").click(function (e) {

    console.log('click')

    e.preventDefault();

    if(!flag){

    return;

    }

    flag = false; // 设

    //end表示抽到的位子

    end = 5;

    getPrize(0,end,round,ms);

    function getPrize(start,end,round,interval){

    var nowNum = start;

    var myRound = round;

    rotation();

    function rotation(){

    if( myRound > 0 ){

    setTimeout(function(){

    nowNum++;

    if(nowNum > 7){

    nowNum = 0;

    myRound--;

    }

    // console.log('block',$('.quan'+nowNum+"_1"))

    $('.quan'+nowNum+"_1").css({"display":"block","zIndex": 2});

    $('.quan'+nowNum+"_1").siblings().css({"display":"none"}); //没有选中的不显示

    // console.log('nowNum:',nowNum,'myRound:',myRound);

    rotation(); //递归调用

    },interval);

    }else if(myRound === 0){ //最后一圈的时候

    setTimeout(function(){

    // console.log('nowNum:',nowNum,'myRound:',myRound);

    $('.quan'+nowNum+"_1").css({"display":"block","zIndex": 2});

    $('.quan'+nowNum+"_1").siblings().css({"display":"none"});

    if( nowNum != end ){

    nowNum++;

    rotation(); //在最后一圈,但是还没有到达想要的位置,继续递归。

    }else{

    //这里写弹窗

    flag = true;

    return null;

    }

    },interval)

    }

    }

    }

    });

    展开全文
  • js/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var time = null; $(function(){ ...
  • //记录转动多少 var ranNum = 80 + 8 * Math.random() //转动随机数后停止 if (j > ranNum) { clearInterval(timer)//停止转动 // $(".rollBlock").each(function () { // $(".rollBlock").removeClass("shadow...
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1.0">
        <title>Document</title>
    
    </head>
    <body>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    
        html, body {
            width: 100%;
            height: 100%;
        }
    
        .outBox {
            width: 300px;
            height: 100px;
            display: flex;
            /*border: 1px solid red;*/
        }
    
        .chooseBlock {
            flex: 1;
            background-color: #00a0e8;
            box-sizing: border-box;
            border: 1px solid red;
        }
    
        .startBtn {
            line-height: 100px;
            background-color: #b2b315;
            text-align: center;
            cursor: pointer;
        }
    
        .shadow {
            background-color: #ff7f90;
        }
    
        .againBox {
            cursor: pointer;
            margin-left: 125px;
            width: 50px;
        }
    </style>
    <div class="outBox">
        <div class="block-0 rollBlock chooseBlock">1</div>
        <div class="block-1 rollBlock chooseBlock">2</div>
        <div class="block-2 rollBlock chooseBlock">3</div>
    </div>
    <div class="outBox">
        <div class="block-7 rollBlock chooseBlock">8</div>
        <div class="block  chooseBlock  startBtn" onselectstart="return false">start</div>
        <div class="block-3 rollBlock chooseBlock">4</div>
    </div>
    <div class="outBox">
        <div class="block-6 rollBlock chooseBlock">7</div>
        <div class="block-5 rollBlock chooseBlock">6</div>
        <div class="block-4 rollBlock chooseBlock">5</div>
    </div>
    <button class="againBox">reset</button>
    <script src="./库/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //转动动画
            var rollFn = function () {
                $(".rollBlock").each(function () {
                    $(".rollBlock").removeClass("shadow")
                })
                $(".startBtn").off("click")//开始后解绑click事件
                var i = Math.floor(8 * Math.random());//在随机块开始转动
                let j = 0;
                var roll = function () {
                    const block = document.getElementsByClassName("block" + "-" + i)
                    const beforeBlock = document.getElementsByClassName("block" + "-" + (i - 1))
    
                    if (i < 8) {
                        i = i + 1;
                        $(beforeBlock).removeClass("shadow")
                        $(block).addClass("shadow")
                        // $(".rollBlock").each(function () {
                        //     $(".rollBlock").removeClass("shadow")
                        // })
                    } else if (i = 8) {
                        $(".block-0").addClass("shadow")
                        $(".block-7").removeClass("shadow")
                        i = 0
                    } else {
                        i = 0;
                    }
                    j = j + 1; //记录转动多少格
                    var ranNum = 80 + 8 * Math.random() //转动随机格数后停止
                    if (j > ranNum) {
                        clearInterval(timer)//停止转动
                        // $(".rollBlock").each(function () {
                        //     $(".rollBlock").removeClass("shadow")
                        // })
                        // var num = 8 * Math.random();
                        // var randomNum = Math.floor(num)
                        // var chooseBlock = $(".rollBlock").toArray();
                        // var randomBlock = chooseBlock[randomNum];
                        // $(randomBlock).addClass("shadow")
                        $(".startBtn").on("click", rollFn)//结束后绑定click事件+功能函数
                    }
                }
                var timer = setInterval(roll, 10)//转动速度
            }
            $(".startBtn").click(rollFn)
            
            $(".againBox").click(function () {
                $(".rollBlock").each(function () {
                    $(".rollBlock").removeClass("shadow")
                })
    
            })
    
        })
    </script>
    </body>
    </html>
    
    展开全文
  • jQuery手机九宫格抽奖特效是一款适合手机移动端的九宫格抽奖游戏代码,界面也挺好看的。
  • 一款界面精美的jQuery手机九宫格抽奖活动页面代码,2019随手狂欢移动端商城九宫格抽奖专题模板。
  • jQuery九宫格大转盘抽奖代码网页特效,点击抽奖按钮开始随机抽奖选择奖品,可设置起点位置、奖品数量、转动次数、中奖位置参数
  • 一款相当不错的jQuery手机九宫格幸运抽奖代码,手机端网站抽奖活动页面九宫格随机抽奖代码。
  • jQuery九宫格抽奖手机模板,模仿商场活动抽奖界面,随机抽奖
  • jQuery九宫格抽奖特效,一般在一些活动中,我们才会用到这样的特效,商城网站会用的很多,例如积分抽奖等,网页游戏中也会有这样的特效,例如充值多少金额就有几次抽奖机会,php中文网推荐下载!
  • jquery九宫格抽奖,有测试代码和用ajax请求的效果代码
  • 这是一款使用jquery制作的九宫格抽奖转盘特效代码。该九宫格抽奖转盘特效模拟手机端app的抽奖天天送豪礼页面,用户可以点击抽奖按钮来随机获取奖品。
  • jQuery九宫格抽奖手机代码是一款手机端会员抽奖专区好运赢大奖特效。
  • jQuery九宫格抽奖活动代码是一款红色风格的服务器空间商购买赠品抽奖源码。
  • jQuery九宫格抽奖活动代码是一款红色风格的服务器空间商购买赠品抽奖源码。
  • jquery 九宫格 抽奖转盘演示,参数可定制化,基于jquery-1.8.3
  • Jquery九宫格抽奖H5

    2019-01-09 11:55:47
    Query点击开始抽奖转盘抽奖代码是一款依赖 jqueryjquery.rotate的转盘组件制作简单的转盘抽奖代码。
  • 代码简介:jQuery九宫格顺时针抽奖代码是一款采用九宫格设计,点击立即抽奖开始大转盘旋转抽奖特效。
  • PHP+jQuery+Ajax九宫格抽奖转盘。
  • 本篇文章主要介绍了原生JS实现九宫格抽奖效果的示例代码。具有很好的参考价值。下面跟着小编一起来看下吧
  • 本篇文章主要介绍了jquery——九宫格大转盘抽奖实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • jQuery九宫格抽奖手机代码是一款手机端会员抽奖专区好运赢大奖特效。
  • jquery九宫格抽奖转盘插件

    千次阅读 2015-12-15 09:18:15
    jquery九宫格抽奖转盘插件lottery这款作品是在csdn上发现的,刚好公司要做一个抽奖的活动页面,下载之后觉得很好就把它分享给大家了。
  • PHP+jQuery+Ajax九宫格抽奖转盘
  • jQuery九宫格转盘抽奖代码基于jQuery.1.2.1.js制作,点击立即抽奖,光标转动随机停留在相应奖品格子。
  • 插件描述:九宫格抽奖,奖品文字图片颜色按钮均可配置,支持同步异步抽奖,概率前后端可控,自动根据 dpr 调整清晰度更新时间:2020-12-24 09:23:29在 Js / JQuery 中使用方式 1:通过 script 标签引入为了避免 CDN ...
  • jquery九宫格轮转盘抽奖

空空如也

空空如也

1 2 3 4 5 ... 12
收藏数 226
精华内容 90
关键字:

jquery实现九宫格抽奖