jquery实现页面加载效果

下面是jQuery实现页面加载效果的完整攻略：

一、思路

实现页面加载效果的核心思路在于通过jQuery，在页面加载完毕之前展示一个加载动画，当页面加载完成后，将动画移除。具体的实现流程如下：

1.在页面尚未加载时，通过jQuery添加特效元素。

2.当页面加载完成后，通过jQuery将特效元素移除。

二、示例说明

示例一——百度加载动画

以下是一个使用jQuery实现的百度加载动画示例，大体实现流程如下：

1.通过jQuery在body中插入一个div，作为百度动画的外层容器。

2.通过CSS样式对插入的div进行样式修饰，包括动画外观和动画效果的细节设置。

3.在jQuery元素上调用fadeOut()。该函数会将动画渐隐，渐隐完成后将div从文档中移除。

<html>
<head>
    <title>百度加载动画示例</title>
    <style type="text/css">
        /* 容器样式 */
        #loading {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: #eeeeee;
            z-index: 9999;
        }
        /* 动画样式 */
        .loading {
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -12px auto 0 -12px;
            width: 24px;
            height: 24px;
            background: url("loading.gif") no-repeat;
            background-size: 100%;
            animation: loading 1s linear infinite;
            -webkit-animation: loading 1s linear infinite;
        }
        /* 显示动画 */
        @keyframes loading {
            from {
                transform: rotate(0);
                -webkit-transform: rotate(0);
            }
            to {
                transform: rotate(360deg);
                -webkit-transform: rotate(360deg);
            }
        }
        @-webkit-keyframes loading {
            from {
                transform: rotate(0);
                -webkit-transform: rotate(0);
            }
            to {
                transform: rotate(360deg);
                -webkit-transform: rotate(360deg);
            }
        }
    </style>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('body').append('<div id="loading"><div class="loading"></div></div>');
        });

        $(window).on('load', function() {
            $('#loading').fadeOut();
        });
    </script>
</head>
<body>
    <!-- 其他页面内容 -->
</body>
</html>

示例二——进度条加载动画

以下是一个使用jQuery实现的进度条加载动画示例，大体实现流程如下：

1.在页面中插入一个进度条元素和一个占位元素。

2.通过CSS样式对两个插入的元素进行样式修饰，包括外观和细节设置。

3.在jQuery元素上调用animate()。该函数会使进度条逐渐从0到100，渐变时间10秒。

4.通过jQuery元素调用fadeOut()。该函数会将进度条渐隐，渐隐完成后将div从文档中移除.

<html>
<head>
    <title>进度条加载动画示例</title>
    <style type="text/css">
        /* 容器样式 */
        #loading {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: #eeeeee;
            z-index: 9999;
        }
        /* 进度条样式 */
        #bar {
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -10px auto 0 -150px;
            width: 300px;
            height: 20px;
            background-color: #fff;
            border: 1px solid #ddd;
        }
        /* 填充不足的占位符样式 */
        #placeholder {
            height: 20px;
            background-color: #f1f1f1;
        }
    </style>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('body').append('<div id="loading"><div id="bar"><div id="placeholder"></div></div></div>');
        });

        $(window).on('load', function() {
            $('#bar').animate({
                width: "100%"
            }, 10000, function() {
                $('#loading').fadeOut();
            });
        });
    </script>
</head>
<body>
    <!-- 其他页面内容 -->
</body>
</html>

以上就是使用jQuery实现页面加载效果的详细攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery实现页面加载效果 - Python技术站

jquery实现页面加载效果

一、思路

二、示例说明

示例一——百度加载动画

示例二——进度条加载动画

相关文章