成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

jQuery實現(xiàn)九宮格抽獎游戲

tracy / 1591人閱讀

摘要：九宮格抽獎游戲本項目在鏈接前端布局將未選中的和選中的圖片定位好圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片定位的時候，按照逆時針，這樣，在旋轉(zhuǎn)的時候，可以容易控制圖片表示選中圖片的樣式?jīng)]有選中圖片的樣式邏輯端

九宮格抽獎游戲

本項目在github 鏈接

前端布局

將未選中的和選中的圖片定位好


    
    圖片
    圖片
    圖片
    

        圖片
    

    圖片
    圖片
    圖片
    圖片




    圖片
    圖片
    圖片
    圖片
    圖片
    圖片
    圖片
    圖片

圖片定位的時候，class按照逆時針0.1.2.3.4.5.6.7，這樣，在旋轉(zhuǎn)的時候，可以容易控制圖片
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表示轉(zhuǎn)幾圈后開始抽獎，ms控制抽獎轉(zhuǎn)圈速度，//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();     //遞歸調(diào)用
                },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();  //在最后一圈，但是還沒有到達想要的位置，繼續(xù)遞歸。
                    }else{

                        //這里寫彈窗
                        flag = true;

                        return null;
                    }
                },interval)
            }
        }
    }

});

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/106416.html

相關(guān)文章

  • vue開發(fā)微信商城項目總結(jié)之五--vue實現(xiàn)九宮格抽獎

    摘要：根據(jù)產(chǎn)品提出的需求，需要做一個抽獎活動頁面需求簡介九宮格抽獎，中獎概率可配置，以九宮格轉(zhuǎn)盤的形式進行抽獎，獎品分為三類，實物類獎品，收貨人信息可編輯，默認為登陸用戶，可生成訂單福幣類獎品，直接發(fā)放，可在交易明細中查看優(yōu)惠劵類獎品，交易明細中 根據(jù)產(chǎn)品提出的需求，需要做一個抽獎活動頁面 需求簡介 九宮格抽獎，中獎概率可配置，以九宮格轉(zhuǎn)盤的形式進行抽獎，獎品分為三類， 實物類獎品，收貨人...

    CoorChice 評論0 收藏0

  • vue抽獎組件之九宮格

    摘要：寫在前面本人自從事前端工作以來，每每遇到技術(shù)問題后，都是向百度谷歌求教，久而久之便養(yǎng)成了伸手即來的本領。。?？赡苁浅鲇趹械脑驔]錯，就是因為懶，從未發(fā)表過技術(shù)文章或開發(fā)經(jīng)驗，深感慚愧，故洗心革面，決心分享一些東西。 寫在前面 本人自從事前端工作以來，每每遇到技術(shù)問題后，都是向百度/谷歌求教，久而久之便養(yǎng)成了伸手即來的‘本領’。。?？赡苁浅鲇凇畱小脑颍]錯，就是因為懶），從未發(fā)表過技...

    wenhai.he 評論0 收藏0

  • vue抽獎組件之九宮格

    摘要：寫在前面本人自從事前端工作以來，每每遇到技術(shù)問題后，都是向百度谷歌求教，久而久之便養(yǎng)成了伸手即來的本領。。?？赡苁浅鲇趹械脑驔]錯，就是因為懶，從未發(fā)表過技術(shù)文章或開發(fā)經(jīng)驗，深感慚愧，故洗心革面，決心分享一些東西。 寫在前面 本人自從事前端工作以來，每每遇到技術(shù)問題后，都是向百度/谷歌求教，久而久之便養(yǎng)成了伸手即來的‘本領’。。。可能是出于‘懶’的原因（沒錯，就是因為懶），從未發(fā)表過技...

    dendoink 評論0 收藏0

  • 九宮格抽獎--手擼代碼

    摘要：總是看到類似的九宮格抽獎效果后來想自己手擼一個試一試吧。多多嘗試萬一成功了呢先來總結(jié)一下效果類似與跑馬燈效果，閃動效果先快后慢。 總是看到類似的九宮格抽獎效果,后來想自己手擼一個試一試吧。(多多嘗試,萬一成功了呢 github L6zt) 先來總結(jié)一下效果,類似與跑馬燈效果，閃動效果先快后慢。代碼解析如下所示：代碼 0 ...

    zhou_you 評論0 收藏0

  • 九宮格抽獎--手擼代碼

    摘要：總是看到類似的九宮格抽獎效果后來想自己手擼一個試一試吧。多多嘗試萬一成功了呢先來總結(jié)一下效果類似與跑馬燈效果，閃動效果先快后慢。 總是看到類似的九宮格抽獎效果,后來想自己手擼一個試一試吧。(多多嘗試,萬一成功了呢 github L6zt) 先來總結(jié)一下效果,類似與跑馬燈效果，閃動效果先快后慢。代碼解析如下所示：代碼 0 ...

    ChanceWong 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<