h5博彩webapp項目實例|h5棋牌遊戲|h5博彩app案例

html5實現的博彩webapp、h5棋牌app實例，運用h5+css3+zepto+jQ+swiper+layer等技術進行布控開發，750px最大寬度適配手機端設備，採用flex+rem佈局樣式。登陸、註冊頁面的驗證提示則是採用的是layer彈窗功能，列表頁面滾動到底部有加載更多提示。

項目效果圖：

$(function(){
    /* 賠錢線數 */
    $("#J__lossLine").on("click", function(){
        var that = $(this);
        var index01 = layer.open({
            type: 1
            ,content: $("#J_Popup_lossLine").html()
            ,anim: 'up'
            ,style: 'position:fixed; bottom:0; left: 0; width: 100%;'
            ,success: function(layero, index){
                $(layero).find(".popup__link a").on("click", function(){
                    var v = $(this).text();
                    //alert(v);
                    that.find(".val").text(v);
                    
                    layer.close(index01);
                });
            }
        });
    });
    
    /* 搜索 */
    $(".J__sear").on("click", function(){
        $(".popup__sear-fixTop").fadeIn(200);
        $(".overlay__bg").addClass("on");
        $("body").addClass("overflow");
    });
    $(".overlay__bg").on("click", function(){
        $(".popup__sear-fixTop").hide();
        $(".overlay__bg").removeClass("on");
        $("body").removeClass("overflow");
    });
    
    //欄目切換
    $(function(){
        $('[data-st-panel-cls="J__swtNav"]').SimpleSwitchTab("click", function (evt, $tabs, $panel) {
            $tabs.parent().removeClass("on");
            $(this).parent().addClass("on");
        }).eq(0).trigger("click");
    });
    
    //下拉加載更多
    $(window).on("scroll", function(){
        if ($(document).scrollTop() + $(window).height() >= $(document).height() - 50) {
            $("#J__loadingTips").slideDown(200);
        }
    });
});

<div class="pg__station-mail fl w100 mt--5">
    <ul class="mailList J__swtMail" style="display: block;" id="J__mailList">
        <li>
            <img class="uimg fl" src="img/placeholder/toux.jpg" />
            <div class="info">
                <h2 class="flexbox"><span class="flex-one clamp1 mr--5">芭比</span><em class="fr c--999 fs12 ff-ss">2017-03-02 09:12:35</em></h2>
                <label class="c--999">好無聊啊，明天過來玩啊！</label>
            </div>
            <div class="btn">
                <a href="站內信(回覆).html"><i>回覆</i></a>
            </div>
        </li>
        <li>
            <img class="uimg fl" src="img/placeholder/toux.jpg" />
            <div class="info">
                <h2 class="flexbox"><span class="flex-one clamp1 mr--5">Johnson</span><em class="fr c--999 fs12 ff-ss">2017-03-02 09:12:35</em></h2>
                <label class="c--999">好無聊啊，明天過來玩啊！ 明天過來玩啊明天過來玩啊明天過來玩啊</label>
            </div>
            <div class="btn">
                <a href="站內信(回覆).html"><i>回覆</i></a>
            </div>
        </li>
        <li>
            <img class="uimg fl" src="img/placeholder/toux.jpg" />
            <div class="info">
                <h2 class="flexbox"><span class="flex-one clamp1 mr--5">Epson</span><em class="fr c--999 fs12 ff-ss">2017-03-02 09:12:35</em></h2>
                <label class="c--999">好的，明天繼續~</label>
            </div>
            <div class="btn">
                <a href="站內信(回覆).html"><i>回覆</i></a>
            </div>
        </li>
        <li>
            <img class="uimg fl" src="img/icon_avatar.png" />
            <div class="info">
                <h2 class="flexbox"><span class="flex-one clamp1 mr--5">金雞鳴春賀新歲，手指送禮鬧新春</span><em class="fr c--999 fs12 ff-ss">2017-03-02 09:12:35</em></h2>
                <label class="c--999">春節瘋狂紅包送不停</label>
            </div>
            <div class="btn">
                <a href="站內信(回覆).html"><i>回覆</i></a>
            </div>
        </li>
    </ul>
    
    <ul class="subscribeList J__swtMail" style="display: none;">
        <h2 class="hd__tit" style="font-size: 12px; padding: 5px 10px;">請選擇須要訂閱的內容：</h2>
        <li class="first">
            <span class="fl">存款</span>
            <span class="fr">
                <em class="c--ccc fs12 ff-hv mr--5">存款時短信通知</em> <input class="cp__checkbox-switch" type="checkbox" checked />
            </span>
        </li>
        <li>
            <span class="fl">取款</span>
            <span class="fr">
                <em class="c--ccc fs12 ff-hv mr--5"></em> <input class="cp__checkbox-switch" type="checkbox" />
            </span>
        </li>
        <li>
            <span class="fl">網站收款帳號更改</span>
            <span class="fr">
                <em class="c--ccc fs12 ff-hv mr--5"></em> <input class="cp__checkbox-switch" type="checkbox" checked />
            </span>
        </li>
        <li>
            <span class="fl">修改密碼</span>
            <span class="fr">
                <em class="c--ccc fs12 ff-hv mr--5"></em> <input class="cp__checkbox-switch" type="checkbox" />
            </span>
        </li>
        <li>
            <span class="fl">修改帳戶姓名</span>
            <span class="fr">
                <em class="c--ccc fs12 ff-hv mr--5"></em> <input class="cp__checkbox-switch" type="checkbox" />
            </span>
        </li>
        <li>
            <span class="fl">修改銀行資料</span>
            <span class="fr">
                <em class="c--ccc fs12 ff-hv mr--5">修改銀行資料短信通知</em> <input class="cp__checkbox-switch" type="checkbox" checked />
            </span>
        </li>
        <li>
            <span class="fl">優惠活動通知</span>
            <span class="fr">
                <em class="c--ccc fs12 ff-hv mr--5">當有優惠活動時短信通知</em> <input class="cp__checkbox-switch" type="checkbox" />
            </span>
        </li>
    </ul>
    
    <!-- //加載數據提示 -->
    <div class="loading__tips mb--20" id="J__loadingTips" style="display: block;margin-top:10px;">
        <img class="loading-img" src="img/deng.gif" />數據加載中...
    </div>
</div>