<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link charset="utf-8" href="css/reset.css" rel="external nofollow" rel="stylesheet"> <link charset="utf-8" href="css/main.css" rel="external nofollow" 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);
效果图显示:
您可能感兴趣的文章:
- jquery ajax加载数据前台渲染方式 不用for遍历的方法
- JQuery Ajax动态加载Table数据的实例讲解
- jQuery实现动态加载select下拉列表项功能示例
- jquery引入外部CDN 加载失败则引入本地jq库
- JS文件中加载jquery.js的实例代码
- jQuery+datatables插件实现ajax加载数据与增删改查功能示例
- jquery 实现拖动文件上传加载进度条功能
- jQuery实现滚动到底部时自动加载更多的方法示例