jquery實現的元素居中外掛簡單介紹
本章節分享一個外掛,它實現了元素的居中效果。
下面給出程式碼例項,然後再給出詳細的實現過程,需要的朋友可以做一下參考。
程式碼如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> #box{ width:500px; height:300px; background:#ccc; margin:100px; } #antzone{ width:200px; height:100px; background:blue; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> (function($){ $.fn._center = function(self, parent, dimension){ if(!dimension.vertical && !dimension.horizontal){ return; } if(parent){ parent = self.parent(); parent.css("position", "relative"); } else{ parent = window; } self.css("position", "absolute"); if(dimension.vertical){ self.css("top",Math.max(0,(($(parent).height()-$(self).outerHeight())/2) +$(parent).scrollTop())+"px"); } if(dimension.horizontal){ self.css("left",Math.max(0,(($(parent).width()-$(self).outerWidth())/2) +$(parent).scrollLeft())+"px"); } return self; }; $.fn.center = function(parent, args){ if(!args){ args = {horizontal: true, vertical: true}; } return this.each(function(){ var obj = $(this); obj._center(obj, parent, args); function callback(){ obj._center(obj, parent, args); } callback(); $(window).resize(callback); }); }; })(jQuery); $(document).ready(function(){ $("#antzone").center(false,{horizontal: true, vertical: true}) }); </script> </head> <body> <div id="box"> <div id="antzone"></div> </div> </body> </html>
上面的程式碼實現了元素的居中效果,下面介紹一下它的實現過程,畢竟掌握原理才是最重要的,因為外掛都不是萬能的,隨時都有可能需要根據需求做出修改,下面進入正題。
一.程式碼註釋:
(1).(function($){})(jQuery),一個匿名自執行函式,傳遞的引數是jQuery物件,這麼寫也可以防止$汙染,當然在當前這個程式碼中沒有這個問題,不過也需要注意到。
(2).$.fn._center = function(self, parent, dimension){},為jQuery物件例項擴充套件一個方法,第一個引數是要居中的元素,第二個引數是一個布林值,規定是否是以父元素作為參考的進行居中,第三個引數是一個物件直接量,規定在垂直或者水平方位上居中,這個方法其實相當於用作內部呼叫。
(3).if(!dimension.vertical && !dimension.horizontal){
return;
},如果既不在垂直方向上居中也不在水平方向上居中,那麼直接返回。
(4).if(parent){
parent = self.parent();
parent.css("position", "relative");
},如果是以父元素為居中參考,那麼先獲取父元素,然後再將其設定為相對定位。
(5).else{
parent = window;
},否則一視窗為居中參考。
(6).self.css("position", "absolute"),將元素設定為絕對定位。
(7).if(dimension.vertical){
self.css("top",Math.max(0,(($(parent).height()-$(self).outerHeight())/2)
+$(parent).scrollTop())+"px");
},如果要在垂直方向上居中。
$(parent).scrollTop()加這個的作用就是實現有滾動條的時候也能夠垂直居中。
(8).return self,返回當前物件,為了實現鏈式呼叫。
二.相關閱讀:
(1).parent()方法可以參閱jQuery parent()一章節。
(2).css()方法可以參閱jQuery css()一章節。
(3).絕對定位可以參閱css absolute一章節。
(4).Math.max()方法可以參閱javascript Math.max()一章節。
(5).outerHeight()方法可以參閱jQuery outerHeight()一章節。
(6).scrollTop()方法可以參閱jQuery scrollTop()一章節。
(7).resize事件可以參閱jQuery resize 事件一章節。
相關文章
- jquery實現的倒數獲取li元素簡單介紹jQuery
- 自定義jquery外掛簡單介紹jQuery
- jQuery自定義外掛簡單介紹jQuery
- jQuery外掛製作簡單介紹jQuery
- jquery.cookie外掛使用簡單介紹jQueryCookie
- jQuery外掛開發流程簡單介紹jQuery
- jquery實現的操作class樣式類簡單介紹jQuery
- jquery實現的圖片預載入簡單介紹jQuery
- jquery css()方法設定元素的樣式簡單介紹jQueryCSS
- jQuery外掛Tmpl使用方法簡單介紹jQuery
- <svg>元素簡單介紹SVG
- jquery.lazyload.js外掛用法簡單介紹jQueryJS
- jQuery EasyUI datagrid實現本地分頁簡單介紹jQueryUI
- jQuery dom元素層級匹配選擇器簡單介紹jQuery
- jQuery Validate簡單介紹jQuery
- jQuery filter() 用法簡單介紹jQueryFilter
- js和jQuery獲取視窗和元素尺寸簡單介紹JSjQuery
- 簡單介紹NMS的實現方法
- 可以被提交的表單元素簡單介紹
- jQuery實現的元素抖動外掛jQuery
- jquery判斷元素是否可見隱藏程式碼簡單介紹jQuery
- jQuery iframe子視窗獲取父視窗元素簡單介紹jQuery
- jQuery阻止事件冒泡簡單介紹jQuery事件
- jQuery自定義事件簡單介紹jQuery事件
- jquery動畫佇列簡單介紹jQuery動畫佇列
- div和span元素的用法簡單介紹
- 簡單介紹numpy實現RNN原理實現RNN
- jQuery實現的生成隨機密碼程式碼例項簡單介紹jQuery隨機密碼
- jQuery LightBox外掛原理的簡單實現jQuery
- 提高jquery效能的常用技巧簡單介紹jQuery
- jQuery常用的動畫函式簡單介紹jQuery動畫函式
- jQuery的index()函式用法簡單介紹jQueryIndex函式
- JavaScript複製dom元素簡單介紹JavaScript
- jQuery滑鼠雙擊事件簡單介紹jQuery事件
- jQuery建構函式簡單介紹jQuery函式
- 原生js的常用dom元素操簡單介紹JS
- jquery操作select下拉選單簡單介紹jQuery
- RPC模式的介紹以及簡單的實現RPC模式