JS Loading功能的简单实现

前端技术 2023/09/03 JavaScript

我们经常在浏览网页的时候会看到数据在加载时，出现的LOADING提示。其实这个功能原理是很简单的，就是一个DIV遮盖当前页面，然后Loading就在遮盖DIV层上展示出来，现在我们来动手实现一下。

1.当前页面：

复制代码 代码如下:

<div class=\"current\"><a href=\"#\" onclick=\"showLoading()\">Loading</a></div>

2.遮罩层：
复制代码 代码如下:

<div id=\"over\" class=\"over\"></div>

3.Loading展示层：
复制代码 代码如下:

<div id=\"layout\" class=\"layout\"><img src=\"http://files.phpstudy.net/file_images/article/201311/2013112931.gif\" alt=\"\" /></div>

整体代码:
复制代码 代码如下:

<!DOCTYPE html>
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
    <title></title>
    <style type=\"text/css\">
        .current a {
            font-size: 20px;
        }

        .over {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #f5f5f5;
            opacity:0.5;
            z-index: 1000;
        }

        .layout {
            display: none;
            position: absolute;
            top: 40%;
            left: 40%;
            width: 20%;
            height: 20%;
            z-index: 1001;
            text-align:center;
        }
    </style>
    <script type=\"text/javascript\">
        function showLoading()
        {
            document.getElementById(\"over\").style.display = \"block\";
            document.getElementById(\"layout\").style.display = \"block\";
        }
    </script>
</head>
<body>
    <div class=\"current\"><a href=\"#\" onclick=\"showLoading()\">Loading</a></div>
    <div id=\"over\" class=\"over\"></div>
    <div id=\"layout\" class=\"layout\"><img src=\"http://files.phpstudy.net/file_images/article/201311/2013112931.gif\" alt=\"\" /></div>
</body>
</html>

本文地址：https://www.stayed.cn/item/8472

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案