jQuery页面区块布局加载代码-jquery案例-前端日记簿

首页 jquery案例正文

jQuery页面区块布局加载代码

2023-11-14 75

效果图：

在案例中每一个区域进行不同的加载完成的效果主要是通过在进入页面的时候动态的去给每一个盒子添加一个遮罩层以及上面的icon图标然后使用动画的方式让图标进行转动

达到一种视觉上的加载效果最后通过定时器将将遮罩层进行移除也就是删除动态添加的demo节点加载完成

html:

在css中除了视图层中的五个盒子进行样式设置外还需要给icon图标以及动态添加的盒子进行一个样式设置

   * {
        padding: 0;
        margin: 0;
      }
      .box1,
      .box2 {
        display: flex;
        justify-content: space-around;
        margin-top: 20px;
      }
      .box1 > div {
        width: 30%;
        height: 200px;
        line-height: 200px;
        text-align: center;
        background: rgba(0, 0, 0, 0.5);
        font-size: 50px;
        font-weight: bold;
        overflow: hidden;
      }
      .box2 > div {
        width: 47%;
        height: 200px;
        line-height: 200px;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.5);
        font-size: 50px;
        font-weight: bold;
        overflow: hidden;
      }
      .myloading {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 99;
        background: rgba(255, 255, 255, 0.7);
        align-items: center;
      }
      .glyphicon-refresh {
        font-size: 32px;
        animation: loadgin linear 2s infinite;
      }
      @keyframes loadgin {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }

然后就是使用封装的方法进行判断添加节点以及调动方法

(function ($) {
    var methods = {
        show: function () {
            return this.each(function (i) {
                var _this = $(this);
                if (_this.css('position') != 'absolute' && _this.css('position') != 'relative') {
                    _this.css('position', 'relative');
                }
                _this.prepend('<div class="myloading"><span class="glyphicon glyphicon-refresh"></span></div>');
            });
        },
        hide: function () {
            return this.each(function (i) {
                var _this = $(this);
                _this.find('.myloading').remove();
            });
        }
    }
    $.fn.myloading = function (options) {
        var method = arguments[0];
        if (methods[method]) {
            method = methods[method];
        } else if (!method) {
            method = methods.show;
        } else {
            $.error('error');
            return this;
        }
        return method.apply(this, arguments);
    }
})(jQuery)

调动封装函数中的show方法给每一个盒子因为在移除节点时不是同一时间进行移除所以分开绑定声明

最后就是进行延迟定时器的设置给每一个demo节点设置不同的时间来调动myloading中的hide方法

完整代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jQuery页面区块布局加载代码</title>
    <link rel="stylesheet" href="./icon.css" />
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .box1,
      .box2 {
        display: flex;
        justify-content: space-around;
        margin-top: 20px;
      }
      .box1 > div {
        width: 30%;
        height: 200px;
        line-height: 200px;
        text-align: center;
        background: rgba(0, 0, 0, 0.5);
        font-size: 50px;
        font-weight: bold;
        overflow: hidden;
      }
      .box2 > div {
        width: 47%;
        height: 200px;
        line-height: 200px;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.5);
        font-size: 50px;
        font-weight: bold;
        overflow: hidden;
      }
      .myloading {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 99;
        background: rgba(255, 255, 255, 0.7);
        align-items: center;
      }
      .glyphicon-refresh {
        font-size: 32px;
        animation: loadgin linear 2s infinite;
      }
      @keyframes loadgin {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }
    </style>
  </head>
  <body>
    <div class="box1">
      <div class="loading-1">第一区域</div>
      <div class="loading-2">第二区域</div>
      <div class="loading-3">第三区域</div>
    </div>
    <div class="box2">
      <div class="loading-4">第四区域</div>
      <div class="loading-5">第五区域</div>
    </div>
  </body>
</html>
<script src="./js/jquery.js"></script>
<script src="./js/myloading.js"></script>
<script>
  var loading1 = $(".loading-1").myloading("show");
  var loading2 = $(".loading-2").myloading("show");
  var loading3 = $(".loading-3").myloading("show");
  var loading4 = $(".loading-4").myloading("show");
  var loading5 = $(".loading-5").myloading("show");

  setTimeout(function () {
    loading1.myloading("hide");
  }, 3000);
  setTimeout(function () {
    loading2.myloading("hide");
  }, 2000);
  setTimeout(function () {
    loading3.myloading("hide");
  }, 5000);
  setTimeout(function () {
    loading4.myloading("hide");
  }, 6000);
  setTimeout(function () {
    loading5.myloading("hide");
  }, 5000);
</script>

标签：

发表评论：取消回复

原文链接：http://1.15.94.33/?id=205

=========================================

http://1.15.94.33/ 为 “前端日记簿” 唯一官方服务平台，请勿相信其他任何渠道。