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>