常用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);
            }
        }
    }

})