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

加载效果(遮罩)

时间:2018-09-07 20:15:48      阅读:219      评论:0      收藏:0      [点我收藏+]

标签:hicon   ade   loading   颜色   script   toolbar   gif   .ajax   dea   

前几天,有群友在问bootstrap的加载效果用什么组件。其实百度搜索一下,也能找到很多的结果。在此,博主根据自己的使用经历分享下几个加载的小组件,希望大家用得着。主要分为实用型和炫酷型两种。实用型效果一般,但能适用各种浏览器;炫酷型使用最新的css3和html5写出来的,效果很炫,但基本上低版本的IE(10以下)都不能兼容。

一、实用型

1、PerfectLoading组件

这个组件是博主在网上找到的一个js,但下载下来之后发现一些大大小小的问题,于是,博主改写了下,命名为bootstrap-loading组件。它的原理就是在组件启动的时候弹出一个覆盖层,然后组件关闭时,将覆盖层的dom移除,加载效果使用了一张gif的图片。

PerfectLoad.js文件内容:

技术分享图片
/*******************************************
 * 
 * Plug-in:友好的页面加载效果
 * Author:sqinyang (sqinyang@sina.com)
 * Time:2015/04/20
 * Explanation:随着HTML5的流行,页面效果越来越炫,同时也需要加载大量的插件及素材,万恶的网速,特别对于挂在国外服务器的网站,一打开一堆素材缓缓加载,位置错乱不齐,故编写此方法,方便大家使用
 *
*********************************************/

jQuery.bootstrapLoading = {
    start: function (options) {
        var defaults = {
            opacity: 1,
            //loading页面透明度
            backgroundColor: "#fff",
            //loading页面背景色
            borderColor: "#bbb",
            //提示边框颜色
            borderWidth: 1,
            //提示边框宽度
            borderStyle: "solid",
            //提示边框样式
            loadingTips: "Loading, please wait...",
            //提示文本
            TipsColor: "#666",
            //提示颜色
            delayTime: 1000,
            //页面加载完成后,加载页面渐出速度
            zindex: 999,
            //loading页面层次
            sleep: 0
            //设置挂起,等于0时则无需挂起

        }
        var options = $.extend(defaults, options);

        //获取页面宽高
        var _PageHeight = document.documentElement.clientHeight,
        _PageWidth = document.documentElement.clientWidth;

        //在页面未加载完毕之前显示的loading Html自定义内容
        var _LoadingHtml = ‘<div id="loadingPage" style="position:fixed;left:0;top:0;_position: absolute;width:100%;height:‘ + _PageHeight + ‘px;background:‘ + options.backgroundColor + ‘;opacity:‘ + options.opacity + ‘;filter:alpha(opacity=‘ + options.opacity * 100 + ‘);z-index:‘ + options.zindex + ‘;"><div id="loadingTips" style="position: absolute; cursor1: wait; width: auto;border-color:‘ + options.borderColor + ‘;border-style:‘ + options.borderStyle + ‘;border-width:‘ + options.borderWidth + ‘px; height:80px; line-height:80px; padding-left:80px; padding-right: 5px;border-radius:10px;  background: ‘ + options.backgroundColor + ‘ url(/Content/bootstrap-loading/images/loading.gif) no-repeat 5px center; color:‘ + options.TipsColor + ‘;font-size:20px;">‘ + options.loadingTips + ‘</div></div>‘;

        //呈现loading效果
        $("body").append(_LoadingHtml);

        //获取loading提示框宽高
        var _LoadingTipsH = document.getElementById("loadingTips").clientHeight,
        _LoadingTipsW = document.getElementById("loadingTips").clientWidth;

        //计算距离,让loading提示框保持在屏幕上下左右居中
        var _LoadingTop = _PageHeight > _LoadingTipsH ? (_PageHeight - _LoadingTipsH) / 2 : 0,
        _LoadingLeft = _PageWidth > _LoadingTipsW ? (_PageWidth - _LoadingTipsW) / 2 : 0;

        $("#loadingTips").css({
            "left": _LoadingLeft + "px",
            "top": _LoadingTop + "px"
        });

        //监听页面加载状态
        document.onreadystatechange = PageLoaded;

        //当页面加载完成后执行
        function PageLoaded() {
            if (document.readyState == "complete") {
                var loadingMask = $(‘#loadingPage‘);

                setTimeout(function () {
                    loadingMask.animate({
                        "opacity": 0
                    },
                    options.delayTime,
                    function () {
                        $(this).hide();

                    });

                },
                options.sleep);

            }
        }
    },
    end: function () {
        $("#loadingPage").remove();
    }
}
技术分享图片

这个js基本上是网上down下来的,只是在此基础上博主加了一个end的方法。

来看看组件如何使用,下面是测试代码:

技术分享图片
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>loading</title>

    <link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" />

    <script src="~/Content/jquery-1.9.1.js"></script>
    <script src="~/Content/bootstrap/js/bootstrap.js"></script>
    <script src="~/Content/bootstrap-loading/PerfectLoad.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn_submit").on("click", function () {
                $.bootstrapLoading.start({ loadingTips: "正在处理数据,请稍候..." });
                $.ajax({
                    type: ‘get‘,
                    url: ‘/Home/TestLoading‘,
                    data: {},
                    success: function (data, statu) {
                        debugger;
                    },
                    complete: function () {
                        $.bootstrapLoading.end();
                    }
                });
            })
            
        });
    </script>
</head>
<body>
    <div class="panel-body" style="padding:0px">
        <div class="panel panel-default" style="height:450px;">
            <div class="panel-heading">查询条件</div>
            <div class="panel-body">
                <form id="formSearch" class="form-horizontal">
                    <div class="form-group">
                        <div class="col-xs-4">
                            <button type="button" id="btn_submit" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>加载测试</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
</html>
技术分享图片

使用说明:组件不需要任何的html代码,只需要在执行loading的时候调用组件的start方法即可。 start()方法启动弹出层,并可设置defaults 变量里面的所有参数。当loading结束后再调用组件的end方法,自动将弹出层移除。来看看效果:

技术分享图片

如果对效果不满意,可自己设置defaults里面的参数,注释写得很详细,在此就不一一列举了。

加载效果(遮罩)

标签:hicon   ade   loading   颜色   script   toolbar   gif   .ajax   dea   

原文地址:https://www.cnblogs.com/sjqq/p/9606625.html

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