翻紙牌抽獎特效

先貼效果圖：首先看到的是背面撲克牌

然後3秒後全部正面

看下都有什麼獎項，3秒後全部展示背面，點擊其中一項，進行抽獎。

揭開最後獎項位置。（注意4圖和2圖位置是不一樣的）

下面開始貼代碼：

html：

<div style="position: absolute; left:10%; top:20%;">

    <div id="container"></div>

</div>

css：

.cards-item {
    width: 50px;
    height: 95px;
    margin-right: 15px;
    margin-bottom: 15px;
    float: left;
    perspective: 1000px;
}
.cards-item-click {
    cursor: pointer;
}
.cards-item-body {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: absolute;
}
.cards-item-body, .cards-item-front, .cards-item-back {
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    position: absolute;
}
.cards-item-front {
    z-index: 2;
    transform: rotateY(0deg);
    background-size: 100% 100% ;
}
.cards-item-back {
    z-index: ;
    transform: rotateY(180deg);
    background-size: 100% 100% ;
}
.cards-item-flip {
    transform: rotateY(-180deg);
}

js：（使用前先引用jquery.min.js，版本都可以我用的是：jquery-1.12.4.js 還需要引用：GearCase4Js_Core.js）

除了jquery.min.js，其他jquery代碼，是我兩年前剛入職時，拜託同學大神寫的代碼。一直保留至今。

//構造

var LItem = function (val, url) {
    this["Value"] = val;
    this["Url"] = url;
    this["Obj"] = null;
};
LItem.prototype = {};
$(function () {
    //配置
    var properties = {
        front: "f.jpg",//牌背
        autoFlipTimeout: 2000,//翻牌延時
        shuffleTime: 200//洗牌交換次數
    };

    var variables = {
        canClick: false//是否響應點擊
    };
    //牌堆
    variables["items"] = new $g.type.List([
        new LItem(5, "5.jpg"),
        new LItem(5, "5.jpg"),
        new LItem(2, "2.jpg"),
        new LItem(2, "2.jpg"),
        new LItem(2, "2.jpg"),
        new LItem(2, "2.jpg"),
        new LItem(2, "2.jpg"),
        new LItem(2, "2.jpg"),
        new LItem(2, "2.jpg"),
        new LItem(2, "2.jpg"),
        new LItem(100, "100.jpg"),
        new LItem(500, "500.jpg")
    ]);

    //牌容器
    var cardContainer = $("<div class='cards'></div>");
    //牌模板
    var cardItemTemplate = "<div class='cards-item'>" +
        "<div class='cards-item-body'>" +
        "<div class='cards-item-front' style=' width: 50px;height: 78px; background-image: url(\"../Luckdraw/img/{:front}\");' />" +
        "<div class='cards-item-back' style='width: 50px;height: 78px; background-image: url(\"../Luckdraw/img/{:back}\");' />" +
        "</div>" +
        "</div>";
    //樣式模板
    var styleTemplate = "url(\"../Luckdraw/img/{:value}\")";
    //遍歷牌堆
    variables.items.each(function (i) {
        //生成對象
        var obj = $(cardItemTemplate.fill("front", properties.front).fill("back", i.Url));
        //註冊點擊
        obj.click(function () {
            if (variables.canClick) {
                variables.canClick = false;
                obj.find(".cards-item-body").addClass("cards-item-flip");
                variables.items.each(function (i) {
                    i.Obj.removeClass("cards-item-click");
                });

                setTimeout(function () {
                    variables.items.each(function (i) {
                        i.Obj.find(".cards-item-body").addClass("cards-item-flip");
                    });
                }, properties.autoFlipTimeout);
                alert(i.Value);
            } else {
                console.log(i.Value);
            }
        });
        //賦值
        i.Obj = obj;
        //添加到容器
        cardContainer.append(i.Obj);
    });
    //將容器添加到頁面
    $("#container").append(cardContainer);
    //首次自動翻牌
    setTimeout(function () {
        //遍歷牌堆
        variables.items.each(function (i) {
            //找到實際dom
            var obj = i.Obj.find(".cards-item-body");
            //翻轉
            obj.addClass("cards-item-flip");
            //延時
            setTimeout(function () {
                //翻回並添加點擊樣式
                obj.removeClass("cards-item-flip");
                i.Obj.addClass("cards-item-click");
            }, properties.autoFlipTimeout);
        });
        //翻轉後
        setTimeout(function () {
            //設置響應點擊
            variables.canClick = true;
            //洗牌
            for (var i = 0; i < properties.shuffleTime; i++) {
                //生成隨機數
                function rand(max) {
                    return Math.floor(Math.random() * max);
                }
                //交換
                function swap(left, right) {
                    var temp = {
                        Value: left.Value,
                        Url: left.Url
                    };

                    left.Value = right.Value;
                    left.Url = right.Url;
                    right.Value = temp.Value;
                    right.Url = temp.Url;
                }
                //生成隨機交換
                var items = variables.items;
                var left = rand(items.length);
                var right = rand(items.length);
                left = items[left];
                right = items[right];
                //進行交換
                swap(left, right);
                //切換圖片
                left.Obj.find(".cards-item-back").css("background-image", styleTemplate.fill("value", left.Url));
                right.Obj.find(".cards-item-back").css("background-image", styleTemplate.fill("value", right.Url));
            }
        }, properties.autoFlipTimeout + 500);
    }, properties.autoFlipTimeout);

})

function ondanji(){
    var divT = document.getElementById("tlble");
    if(divT.style.display=="none"){
        divT.style.display="block";
    }else{
        divT.style.display="none";
    }
}

這樣就完成了。還可以控制抽到大獎的機率哦，需要修改機率的看不懂可以加我QQ：2751499750

以前用到過，希望能幫助你！