码迷,mamicode.com
首页 > 其他好文 > 详细

前端小结(4)---- 页面加载loding....

时间:2015-10-14 17:30:14      阅读:152      评论:0      收藏:0      [点我收藏+]

标签:

/*正在加载*/
function showLoading(elem) {
    var html = ‘<div class="loading"><div id="over" class="over"></div><div id="layout" class="layout"><img src="../../assets/img/loading.gif" /></div></div>‘
    if (elem) {
        elem.after(html);
    }

    $("#over").css("display", "block");
    $("#layout").css("display", "block");
}

function hideLoading(elem) {
    elem.next().remove();
}
<img src="../../assets/img/loading.gif" />中替换成对应的加载图标

对应css:
.over {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(2, 2, 2, 0.15);
    opacity: 0.5;
    z-index: 1000;
}

.layout {
    display: none;
    position: absolute;
    top: 28%;
    left: 40%;
    width: 20%;
    height: 20%;
    z-index: 1001;
    text-align: center;
}

 

前端小结(4)---- 页面加载loding....

标签:

原文地址:http://www.cnblogs.com/endlessdream/p/4877971.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!