zoukankan      html  css  js  c++  java
  • 常用js效果-toTop-加载中-下拉加载更多

    <!--加载图标start-->
    <div class="loadWrap">
    <div class="loading">
    <img class="loadImg" src="http://img1.40017.cn/cn/s/njl/loading2.gif" alt=""/>
    <span>正在加载</span>
    <a class="closeLoad" href="javascript:;">
    <img src="http://img1.40017.cn/cn/s/njl/dpSub_closeLoading.png" alt=""/>
    </a>
    </div>
    </div>
    <!--加载图标end-->

    <!--加载更多start-->
    <div id="more" class="loadMore">
    <em class="mIco"></em>
    <label class="mLabel">加载中...</label>
    </div>
    <!--加载更多end-->


    .loadWrap{ 100%;height: 100%;position: fixed;top:0;left: 0;-webkit-box-align: center;-webkit-box-pack: center;display: -webkit-box;}
    .loadWrap .loading{background: rgba(0,0,0,0.85);display: -webkit-box;padding: 6px 0;border-radius: 8px;-webkit-box-align: center;-webkit-box-pack: center;}
    .loadWrap .loading .loadImg{ 36px;height: 36px;padding-left: 10px;}
    .loadWrap .loading span{font-size: 14px;color: #ccc;display: -webkit-box;padding-right: 10px;}
    .loadWrap .loading .closeLoad{display: block;border-left: 1px solid #686868;display: -webkit-box;-webkit-box-align: center;padding: 0 17px;}
    .loadWrap .loading .closeLoad img{ 13px;height: 13px;}

    #more{ text-align: center;}
    #more .mIco{
    background: url(data:image/png;base64,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) 0 0 no-repeat;
    background-size: 40px 80px;
    display: block;
    40px;
    height: 40px;
    margin: 0 auto;
    text-align: center;
    }

    #more.loadMore .mIco{
    background-position: 0 100%;
    -webkit-transition-duration: 0ms;
    -webkit-animation-name: loading;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    }

    @-webkit-keyframes loading{
    from {-webkit-transform:rotate(0deg) translateZ(0);} to {-webkit-transform:rotate(360deg) translateZ(0);}
    }

    .gotop{display: none;background: url("http://img1.40017.cn/cn/s/touch/2014/waterShow/gotoTopBtn.png") no-repeat center;background-size: cover; 40px;height: 40px;position: fixed;bottom: 10px;right: 0;z-index: 10;}


    $(function(){
    var more=$("#more");

    var top = document.createElement("div");
    top.className = "gotop";
    $("body").append(top);
    top.onclick = function(){
    $(window).scrollTop(0);
    };

    var pullClick=true;

    $(window).scroll(function(){
    var st = $(window).scrollTop();
    var bh = $(document).height();
    var ph = $(window).height();
    if(st + ph >= bh){
    LoadMoreBtn();
    }

    if(st > 200){
    $(".gotop").show();
    }
    else{
    $(".gotop").hide();
    }
    });

    $(".closeLoad").on("click",function(){
    $(".loadWrap").css("display","none");
    })

    function LoadMoreBtn(){
    more.className = 'loadMore';
    if(pagenum >= tolPageNum){
    more.css("display","none");
    } else {
    if(pullClick == false){return;}
    pullClick = false;
    more.show();
    pagenum += 1;
    if(more.style.display != 'none'){
    wh(myCid,pagenum);
    }
    }
    }

    })










  • 相关阅读:
    [BJOI2019] 光线
    C# 从零开始写 SharpDx 应用 笔刷
    BAT 脚本判断当前系统是 x86 还是 x64 系统
    BAT 脚本判断当前系统是 x86 还是 x64 系统
    win2d 通过 CanvasActiveLayer 画出透明度和裁剪
    win2d 通过 CanvasActiveLayer 画出透明度和裁剪
    PowerShell 拿到显卡信息
    PowerShell 拿到显卡信息
    win10 uwp 如何使用DataTemplate
    win10 uwp 如何使用DataTemplate
  • 原文地址:https://www.cnblogs.com/serene92/p/4284109.html
Copyright © 2011-2022 走看看