翻纸牌抽奖特效

先贴效果图：首先看到的是背面扑克牌

然后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

以前用到过，希望能帮助你！