封装一个jquery库
生活随笔
收集整理的這篇文章主要介紹了
封装一个jquery库
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
現(xiàn)在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>轉(zhuǎn)載于:https://www.cnblogs.com/liubeimeng/p/5807829.html
總結(jié)
以上是生活随笔為你收集整理的封装一个jquery库的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 无限轮播图片的实现原理
- 下一篇： Apache - Storm