成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

jQuery實(shí)現(xiàn)九宮格抽獎(jiǎng)游戲

tracy / 1652人閱讀

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

九宮格抽獎(jiǎng)游戲

本項(xiàng)目在github 鏈接

前端布局

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


    
    圖片
    圖片
    圖片
    

        圖片
    

    圖片
    圖片
    圖片
    圖片




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

圖片定位的時(shí)候，class按照逆時(shí)針0.1.2.3.4.5.6.7，這樣，在旋轉(zhuǎn)的時(shí)候，可以容易控制圖片
quan5_1.png表示選中圖片的樣式；quan5.png沒(méi)有選中圖片的樣式

$(".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)幾圈后開(kāi)始抽獎(jiǎng)，ms控制抽獎(jiǎng)轉(zhuǎn)圈速度，//end表示抽到的積分或者券
var flag = true;   //防止重復(fù)點(diǎn)擊
$(".chou-tap").click(function (e) {
    console.log("click")
    e.preventDefault();
 if(!flag){
  return;
 }
 flag = false; // 設(shè)
 //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"}); //沒(méi)有選中的不顯示
                    // console.log("nowNum:",nowNum,"myRound:",myRound);
                    rotation();     //遞歸調(diào)用
                },interval);
            }else if(myRound === 0){  //最后一圈的時(shí)候
                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();  //在最后一圈，但是還沒(méi)有到達(dá)想要的位置，繼續(xù)遞歸。
                    }else{

                        //這里寫彈窗
                        flag = true;

                        return null;
                    }
                },interval)
            }
        }
    }

});

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/106416.html

相關(guān)文章

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

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

    CoorChice 評(píng)論0 收藏0

  • vue抽獎(jiǎng)組件之九宮格

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

    wenhai.he 評(píng)論0 收藏0

  • vue抽獎(jiǎng)組件之九宮格

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

    dendoink 評(píng)論0 收藏0

  • 九宮格抽獎(jiǎng)--手?jǐn)]代碼

    摘要：總是看到類似的九宮格抽獎(jiǎng)效果后來(lái)想自己手?jǐn)]一個(gè)試一試吧。多多嘗試萬(wàn)一成功了呢先來(lái)總結(jié)一下效果類似與跑馬燈效果，閃動(dòng)效果先快后慢。 總是看到類似的九宮格抽獎(jiǎng)效果,后來(lái)想自己手?jǐn)]一個(gè)試一試吧。(多多嘗試,萬(wàn)一成功了呢 github L6zt) 先來(lái)總結(jié)一下效果,類似與跑馬燈效果，閃動(dòng)效果先快后慢。代碼解析如下所示：代碼 0 ...

    zhou_you 評(píng)論0 收藏0

  • 九宮格抽獎(jiǎng)--手?jǐn)]代碼

    摘要：總是看到類似的九宮格抽獎(jiǎng)效果后來(lái)想自己手?jǐn)]一個(gè)試一試吧。多多嘗試萬(wàn)一成功了呢先來(lái)總結(jié)一下效果類似與跑馬燈效果，閃動(dòng)效果先快后慢。 總是看到類似的九宮格抽獎(jiǎng)效果,后來(lái)想自己手?jǐn)]一個(gè)試一試吧。(多多嘗試,萬(wàn)一成功了呢 github L6zt) 先來(lái)總結(jié)一下效果,類似與跑馬燈效果，閃動(dòng)效果先快后慢。代碼解析如下所示：代碼 0 ...

    ChanceWong 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<