菊花转动的jquery加载动画效果
编程学习 2021-07-04 16:46www.dzhlxh.cn编程入门
我们这次给大家带来的是关于用jquery实现菊花转动的加载动画效果,以及相关实例代码,有兴趣的朋友可以学习下。
<!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);
效果图显示: