利用Query實現點擊翻牌抽獎游戲代碼



51 203 68



特效描述:利用Query實現 點擊翻牌抽獎 游戲代碼,利用Query實現點擊翻牌抽獎游戲代碼

代碼結構

1. 引入CSS

<link rel="stylesheet" href="css/rotate.css" />
<link rel="stylesheet" href="css/rotate.css" />

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/rem.js"></script>
<script type="text/javascript" src="js/rotate.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/rem.js"></script>
<script type="text/javascript" src="js/rotate.js"></script>

3. HTML代碼

?<!DOCTYPE html>
<!--
這里通過get形式的type字段判斷不同的明細(樂豆明細,游戲幣明細,對戰記錄);
-->
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<!--移動端需要的meta-->
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="format-detection" content="telephone=no">
<!--關鍵詞和描述-->
<meta name="keywords" content="">
<meta name="description" content="">
<!--css-->
<!--js-->
<!--頁面抽獎流程相關js-->
<!--傳統的流式布局-->
<style>
	body{
		margin: 0;
		padding: 0;
	}
	.jpBox{
		position: absolute;
		left: 50%;
		top:50%;
		transform: translate(-50%,-50%);
		font-size: 0.375rem;
		color: #333333;
		white-space: nowrap;
	}
	.title{
		text-align: center;font-size: 16px;margin-top: 100px;
		margin-bottom: 30px;
	}
</style>
</head>
<body style="max-width: 640px;display: block;margin: auto">
<!--正常流程-->
<div class="title">正常的翻牌流程</div>
    <div id="allParent" class="Y-content" >
        <div class="item i1">
            <div class="parent">
                <div class="face">
                    <div class="jpBox">
                        游戲幣100
                    </div>
                </div>
                <div class="back"><img src="a1.png" style="width: 100%;height: 100%"></div>
            </div>
        </div>
        <div class="item i2">
            <div class="parent">
                <div class="face">
                    <div class="jpBox">
                        公仔一個
                    </div>
                </div>
                <div class="back"><img src="a1.png" style="width: 100%;height: 100%"></div>
            </div>
        </div>
        <div class="item i3">
            <div class="parent">
                <div class="face">
                    <div class="jpBox">
                        畫筆一個
                    </div>
                </div>
                <div class="back"><img src="a1.png" style="width: 100%;height: 100%"></div>
            </div>
        </div>
        <div class="item i4">
            <div class="parent">
                <div class="face">
                    <div class="jpBox">
                        哎呦~~
                    </div>
                </div>
                <div class="back"><img src="a1.png" style="width: 100%;height: 100%"></div>
            </div>
        </div>
        <div class="item i5">
            <div class="parent">
                <div class="face">
                    <div class="jpBox">
                        再抽一次
                    </div>
                </div>
                <div class="back"><img src="a1.png" style="width: 100%;height: 100%"></div>
            </div>
        </div>
        <div class="item i6">
            <div class="parent">
                <div class="face">
                    <div class="jpBox">
                        金豆100
                    </div>
                </div>
                <div class="back"><img src="a1.png" style="width: 100%;height: 100%"></div>
            </div>
        </div>
        <div class="item i7">
            <div class="parent">
                <div class="face">
                    <div class="jpBox">
                        相片一張
                    </div>
                </div>
                <div class="back"><img src="a1.png" style="width: 100%;height: 100%"></div>
            </div>
        </div>
        <div class="item i8">
            <div class="parent">
                <div class="face">
                    <div class="jpBox">
                        金豆20
                    </div>
                </div>
                <div class="back"><img src="a1.png" style="width: 100%;height: 100%"></div>
            </div>
        </div>
        <div class="selectBox" id="">
            <div class="parent">
                <div class="face">
                    <div class="jpBox">
                        點我抽獎
                    </div>
                </div>
                <div class="back"></div>
            </div>
        </div>
    </div>
<!--一來就將牌設置為反面狀態-->
<div class="title">一來就將牌設置為反面狀態</div>
<div id="allParent2" class="Y-content" >
    <div class="item i1">
        <div class="parent">
            <div class="face">
                <div class="jpBox">
                    游戲幣100
                </div>
            </div>
            <div class="back"><img src="a1.png" style="width: 100%;height: 100%"></div>
        </div>
    </div>
    <div class="item i2">
        <div class="parent">
            <div class="face">
                <div class="jpBox">
                    公仔一個
                </div>
            </div>
            <div class="back"><img src="a1.png" style="width: 100%;height: 100%"></div>
        </div>
    </div>
    <div class="item i3">
        <div class="parent">
            <div class="face">
                <div class="jpBox">
                    畫筆一個
                </div>
            </div>
            <div class="back"><img src="a1.png" style="width: 100%;height: 100%"></div>
        </div>
    </div>
    <div class="item i4">
        <div class="parent">
            <div class="face">
                <div class="jpBox">
                    哎呦~~
                </div>
            </div>
            <div class="back"><img src="a1.png" style="width: 100%;height: 100%"></div>
        </div>
    </div>
    <div class="item i5">
        <div class="parent">
            <div class="face">
                <div class="jpBox">
                    再抽一次
                </div>
            </div>
            <div class="back"><img src="a1.png" style="width: 100%;height: 100%"></div>
        </div>
    </div>
    <div class="item i6">
        <div class="parent">
            <div class="face">
                <div class="jpBox">
                    金豆100
                </div>
            </div>
            <div class="back"><img src="a1.png" style="width: 100%;height: 100%"></div>
        </div>
    </div>
    <div class="item i7">
        <div class="parent">
            <div class="face">
                <div class="jpBox">
                    相片一張
                </div>
            </div>
            <div class="back"><img src="a1.png" style="width: 100%;height: 100%"></div>
        </div>
    </div>
    <div class="item i8">
        <div class="parent">
            <div class="face">
                <div class="jpBox">
                    金豆20
                </div>
            </div>
            <div class="back"><img src="a1.png" style="width: 100%;height: 100%"></div>
        </div>
    </div>
    <div class="selectBox" id="">
        <div class="parent">
            <div class="face">
                <div class="jpBox">
                    點我抽獎
                </div>
            </div>
            <div class="back"></div>
        </div>
    </div>
</div>
<!--設置不能點擊的翻牌-->
<div class="title">設置不能點擊的翻牌</div>
<div id="allParent3" class="Y-content">
    <div class="item i1">
        <div class="parent">
            <div class="face">
                <div class="jpBox">
                    游戲幣100
                </div>
            </div>
            <div class="back"><img src="a1.png" style="width: 100%;height: 100%"></div>
        </div>
    </div>
    <div class="item i2">
        <div class="parent">
            <div class="face">
                <div class="jpBox">
                    公仔一個
                </div>
            </div>
            <div class="back"><img src="a1.png" style="width: 100%;height: 100%"></div>
        </div>
    </div>
    <div class="item i3">
        <div class="parent">
            <div class="face">
                <div class="jpBox">
                    畫筆一個
                </div>
            </div>
            <div class="back"><img src="a1.png" style="width: 100%;height: 100%"></div>
        </div>
    </div>
    <div class="item i4">
        <div class="parent">
            <div class="face">
                <div class="jpBox">
                    哎呦~~
                </div>
            </div>
            <div class="back"><img src="a1.png" style="width: 100%;height: 100%"></div>
        </div>
    </div>
    <div class="item i5">
        <div class="parent">
            <div class="face">
                <div class="jpBox">
                    再抽一次
                </div>
            </div>
            <div class="back"><img src="a1.png" style="width: 100%;height: 100%"></div>
        </div>
    </div>
    <div class="item i6">
        <div class="parent">
            <div class="face">
                <div class="jpBox">
                    金豆100
                </div>
            </div>
            <div class="back"><img src="a1.png" style="width: 100%;height: 100%"></div>
        </div>
    </div>
    <div class="item i7">
        <div class="parent">
            <div class="face">
                <div class="jpBox">
                    相片一張
                </div>
            </div>
            <div class="back"><img src="a1.png" style="width: 100%;height: 100%"></div>
        </div>
    </div>
    <div class="item i8">
        <div class="parent">
            <div class="face">
                <div class="jpBox">
                    金豆20
                </div>
            </div>
            <div class="back"><img src="a1.png" style="width: 100%;height: 100%"></div>
        </div>
    </div>
    <div class="selectBox" id="">
        <div class="parent">
            <div class="face">
                <div class="jpBox">
                    點我抽獎
                </div>
            </div>
            <div class="back"></div>
        </div>
    </div>
</div>
<!--當翻牌到了最大數量就顯示所有獎品-->
<div class="title">當翻牌到了最大數量就顯示所有獎品</div>
<div id="allParent4" class="Y-content" >
    <div class="item i1">
        <div class="parent">
            <div class="face">
                <div class="jpBox">
                    游戲幣100
                </div>
            </div>
            <div class="back"><img src="a1.png" style="width: 100%;height: 100%"></div>
        </div>
    </div>
    <div class="item i2">
        <div class="parent">
            <div class="face">
                <div class="jpBox">
                    公仔一個
                </div>
            </div>
            <div class="back"><img src="a1.png" style="width: 100%;height: 100%"></div>
        </div>
    </div>
    <div class="item i3">
        <div class="parent">
            <div class="face">
                <div class="jpBox">
                    畫筆一個
                </div>
            </div>
            <div class="back"><img src="a1.png" style="width: 100%;height: 100%"></div>
        </div>
    </div>
    <div class="item i4">
        <div class="parent">
            <div class="face">
                <div class="jpBox">
                    哎呦~~
                </div>
            </div>
            <div class="back"><img src="a1.png" style="width: 100%;height: 100%"></div>
        </div>
    </div>
    <div class="item i5">
        <div class="parent">
            <div class="face">
                <div class="jpBox">
                    再抽一次
                </div>
            </div>
            <div class="back"><img src="a1.png" style="width: 100%;height: 100%"></div>
        </div>
    </div>
    <div class="item i6">
        <div class="parent">
            <div class="face">
                <div class="jpBox">
                    金豆100
                </div>
            </div>
            <div class="back"><img src="a1.png" style="width: 100%;height: 100%"></div>
        </div>
    </div>
    <div class="item i7">
        <div class="parent">
            <div class="face">
                <div class="jpBox">
                    相片一張
                </div>
            </div>
            <div class="back"><img src="a1.png" style="width: 100%;height: 100%"></div>
        </div>
    </div>
    <div class="item i8">
        <div class="parent">
            <div class="face">
                <div class="jpBox">
                    金豆20
                </div>
            </div>
            <div class="back"><img src="a1.png" style="width: 100%;height: 100%"></div>
        </div>
    </div>
    <div class="selectBox" id="">
        <div class="parent">
            <div class="face">
                <div class="jpBox">
                    點我抽獎
                </div>
            </div>
            <div class="back"></div>
        </div>
    </div>
</div>
    <!--提示框-->
    <div id="tooltip" style="display:none;position: fixed;left: 50%;top: 50%;transform: translate(-50%,-50%);font-size: 18px;background-color: rgba(0,0,0,0.5);color: white;padding: 5px 10px;z-index: 1000;white-space: nowrap"></div>
<script type="text/javascript">
    //提示框
    function showTool(str){
        var ele =  document.getElementById("tooltip");
        ele.innerHTML = str;
        ele.style.display="";
        setTimeout(hideTool,1000);
    }
    function hideTool(str){
        var ele =  document.getElementById("tooltip");
        ele.innerHTML = str;
        ele.style.display="none";
    }
    window.onload = function(){
      var obj =   $("#allParent").rotateEx({
            maxNumCall:function(){
                showTool("翻到了最大的數量啦");
            },
            clickAmtStart:function(o1,o2,o3){
                showTool("恭喜抽中"+o3.innerText);
            },
            clickAmtEnd:function(o1,o2){
                //o2顯示所有獎品
                o2.allFace();
            },
            changeAmtCall:function(o1,o2){
                //隨機修改獎品的位置
                obj.reset();
            }
        });
        //一來就播放動畫且設置能翻牌的數量
        var obj2 =   $("#allParent2").rotateEx({
            maxNum:5,
            maxNumCall:function(){
                showTool("翻到了最大的數量啦");
            },
            clickAmtStart:function(o1,o2,o3){
                showTool("恭喜抽中"+o3.innerText);
            },
            changeAmtCall:function(o1,o2){
                //隨機修改獎品的位置
                obj2.reset();
            }
        });
        obj2.rotate.allBack();
        //一來就播放動畫且設置能翻牌的數量且設置不能反派的元素
        var obj3 =   $("#allParent3").rotateEx({
            maxNum:2,
            noFaceEle:[3,5],
            maxNumCall:function(){
                showTool("翻到了最大的數量啦");
            },
            clickAmtStart:function(o1,o2,o3){
                showTool("恭喜抽中"+o3.innerText);
            },
            changeAmtCall:function(o1,o2){
                //隨機修改獎品的位置
                obj3.reset();
            }
        });
        obj3.rotate.allBack();
        window.test = obj3
        var obj4 =   $("#allParent4").rotateEx({
            maxNum:2,
            noFaceEle:[3,5],
            maxNumCall:function(){
                showTool("翻到了最大的數量啦");
            },
            clickAmtStart:function(o1,o2,o3){
                showTool("恭喜抽中"+o3.innerText);
            },
            clickAmtEnd:function(o1,o2,ele,allO){
                if(allO.option.maxNum == o2.getZNum()){
                    o2.allFace();
                }
            },
            changeAmtCall:function(o1,o2){
                //隨機修改獎品的位置
                obj4.reset();
            }
        });
        obj4.rotate.allBack();
    }
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 旋轉翻轉 旋轉 翻轉 小游戲 H5游戲 游戲源碼 手機游戲 微信游戲 網頁游戲 圖片翻轉 圖片旋轉 其他游戲 其他h5游戲 其他h5源碼游戲
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子 黑龙江p62 辽宁快乐12开奖玩法 年轻人做什么最赚钱 甘肃十一选五牛人看 河北快三规则及中奖规则 黑龙江36选7开奖号 时时彩计划稳定版 丝路传说义士怎么赚钱 陕西快乐10分第36期开奖结果 开发一个游戏怎么赚钱吗 福彩中奖号码预测 绝地求生手游赚钱方法 湖南快乐十分开奖直播 火红怎么赚钱快 吉林快3走势图500 新疆时时个人计划