<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link charset="utf-8" href="https://www.jb51.net/css/reset.css"> <link charset="utf-8" href="https://www.jb51.net/css/main.css"> <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="https://www.jb51.net/js/jquery-1.8.3.min.js"></script> <script src="https://www.jb51.net/js/mychajian.js"></script> <!-- 添加jq的loading插件--> </head> <body> <div></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);
效果图显示：
您可能感兴趣的文章: