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:35em>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">Johnsonspan><em class="fr c--999 fs12 ff-ss">2017-03-02 09:12:35em>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">Epsonspan><em class="fr c--999 fs12 ff-ss">2017-03-02 09:12:35em>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:35em>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>

 

转载于:https://www.cnblogs.com/xiaoyan2017/p/9424861.html