jquery的loading动画插件

最新推荐文章于 2025-06-27 16:42:27 发布

原创最新推荐文章于 2025-06-27 16:42:27 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

前端笔记同时被 3 个专栏收录

165 篇文章

订阅专栏

jquery

32 篇文章

订阅专栏

jquery插件

7 篇文章

订阅专栏

本文介绍了一个简单的jQuery加载动画插件实现方法。通过定义样式和使用jQuery扩展函数，可以在页面元素上快速展示加载动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>Title</title>
    <link charset="utf-8" href="css/reset.css" rel="stylesheet">
    <link charset="utf-8" href="css/main.css" rel="stylesheet">

    <style>
        .box{width:200px;height:200px;background:#000000;}
        .xxloading{width:100%;height:100%;background:rgba(255,255,255,0.2);}
        .xxloading .xximg{width:100%;height:100%;background:url("../img/ico/loading2.gif") no-repeat center;}
    </style>

    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/mychajian.js"></script>  <!-- 添加jq的loading插件-->
</head>
<body>




<div class="box"></div>



<script>

    $(function () {

        $(".box").myloading();  //执行loading动画
    });

</script>

</body>
</html>

mychajian.js的插件内容：

;(function($){

    $.fn.extend({
        myloading:function(obj){

            var str=[" <div class=\"xxloading\">",
                "        <div class=\"xximg\"></div>",
                "    </div>"].join("");
            
            return  this.append(str);

        }

    });
})(jQuery);

效果图显示：