封装一个jquery库

现在Javascript库海量，流行的也多，比如jQuery，YUI等，虽然功能强大，但也是不万能的，功能不可能涉及方方面面，自己写一个的JS库是对这些的补充，很多也比较实用，把应用到项目中中去也比较方面，这也是对工作的一些积累，也加深对知识的理解。

 1 (function(jQuery){
 2     /**
 3      * 元素居中
 4      * @return {[type]}
 5      */
 6     jQuery.fn.mCenterDiv = function (){
 7         this.css("position", "absolute");
 8         this.css("border", "1px solid #ccc");
 9         this.css("top", ($(window).height() - this.height()) / 2 + $(window).scrollTop() + "px");
10         this.css("left", ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + "px");
11         this.show(100);
12         return this;
13     };
14 })(jQuery);

html部分代码:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7     .box{width:400px;height:400px;background:pink;}
 8     </style>
 9 </head>
10 <body>
11 <div class="box"></div>
12 <script type="text/javascript" src="jquery.js"></script>
13 <script type="text/javascript" src="js.js"></script>    
14 </body>
15 </html>
16 <script type="text/javascript">
17     $(function(){
18         $(".box").mCenterDiv();
19         $(window).resize(function(){
20             $(".box").mCenterDiv();
21         });
22         
23     });
24 </script>
posted @ 2016-08-25 18:04  SkyTeam_LBM  阅读(299)  评论(0)  编辑  收藏  举报