自定义作用标签 jquery 加载插件showLoading

最新推荐文章于 2024-07-28 02:30:13 发布

JaydonRan

最新推荐文章于 2024-07-28 02:30:13 发布

阅读量1.6k

点赞数

分类专栏：设计想法文章标签：加载插件 jquery loading jquery加载插件 js加载插件自定义加载插件

本文链接：https://blog.csdn.net/u012555259/article/details/85011849

版权

设计想法专栏收录该内容

4 篇文章 0 订阅

订阅专栏

自定义作用标签 jquery 加载插件showLoading

jquery 加载插件showLoading
- 插件代码
- 使用方式

jquery 加载插件showLoading

一个jquery的加载插件，可以自定义加载于任何块标签上。还可以自定义遮罩透明度、加载gif、加载gif大小。
demo下载

插件代码

(function ($) {

    /**
     * 显示loading
     * @param a  透明度
     * @param w  gif图片的宽度
     * @param h  gif图片的高度
     * @param gif  gif图片的地址
     */
    $.fn.showLoading= function(a,w,h,gif){
        var $this = $(this);
        var offset =$this.offset();
        var html = '<div class="loading" ' +
            'style="position:absolute; left:'+offset.left+'px;top:'+offset.top+';width: '+$this.width()+'px;height: '+$this.height()+'px;' +
            'background: rgba(0,0,0,'+a+')">' +
            '<img style="display:block;margin:auto;padding-top:'+(($this.height()/2) - (h/2))+'px;width: '+w+'px;height: ='+h+'px" src="'+gif+'">' +
            '</div>';
        $this.append(html)
    };
    //关闭loading
    $.fn.closeLoading= function(){
        $(this).find(".loading").remove();
    };
})(jQuery);

使用方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="loading" style="float:left;width: 300px;height: 450px;background: chartreuse">
</div>

<div id="tt2" style="float:left;width: 300px;height: 450px;background: rebeccapurple">

</div>
</body>
<script src="jquery-3.3.1.min.js"></script>
<script src="jq_loading.js"></script>
<script>




    //整个屏幕显示loading
    //$("html").showLoading(0.3,100,100,"2018_7_23_9_0_46_974_1109.gif");
    //在#tt2显示loading
    $("#tt2").showLoading(0.3,200,200,"timg (7).gif");
    setTimeout(function () {
        //关闭loading
       // $("#tt2").closeLoading()
    },5000);
</script>
</html>