jquery實(shí)現(xiàn)的元素居中插件簡單介紹
本章節(jié)分享一個(gè)插件，它實(shí)現(xiàn)了元素的居中效果。
下面給出代碼實(shí)例，然后再給出詳細(xì)的實(shí)現(xiàn)過程，需要的朋友可以做一下參考。
代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="/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>上面的代碼實(shí)現(xiàn)了元素的居中效果，下面介紹一下它的實(shí)現(xiàn)過程，畢竟掌握原理才是最重要的，因?yàn)椴寮疾皇侨f能的，隨時(shí)都有可能需要根據(jù)需求做出修改，下面進(jìn)入正題。
一.代碼注釋:
（1）.(function($){})(jQuery)，一個(gè)匿名自執(zhí)行函數(shù)，傳遞的參數(shù)是jQuery對(duì)象，這么寫也可以防止$污染，當(dāng)然在當(dāng)前這個(gè)代碼中沒有這個(gè)問題，不過也需要注意到。
（2）.$.fn._center = function(self, parent, dimension){}，為jQuery對(duì)象實(shí)例擴(kuò)展一個(gè)方法，第一個(gè)參數(shù)是要居中的元素，第二個(gè)參數(shù)是一個(gè)布爾值，規(guī)定是否是以父元素作為參考的進(jìn)行居中，第三個(gè)參數(shù)是一個(gè)對(duì)象直接量，規(guī)定在垂直或者水平方位上居中,這個(gè)方法其實(shí)相當(dāng)于用作內(nèi)部調(diào)用。
（3）.if(!dimension.vertical && !dimension.horizontal){
return;
}，如果既不在垂直方向上居中也不在水平方向上居中，那么直接返回。
（4）.if(parent){
parent = self.parent();
parent.css("position", "relative");
}，如果是以父元素為居中參考，那么先獲取父元素，然后再將其設(shè)置為相對(duì)定位。
（5）.else{
parent = window;
}，否則一窗口為居中參考。
（6）.self.css("position", "absolute")，將元素設(shè)置為絕對(duì)定位。
（7）.if(dimension.vertical){
self.css("top",Math.max(0,(($(parent).height()-$(self).outerHeight())/2)
+$(parent).scrollTop())+"px");
}，如果要在垂直方向上居中。
$(parent).scrollTop()加這個(gè)的作用就是實(shí)現(xiàn)有滾動(dòng)條的時(shí)候也能夠垂直居中。
（8）.return self，返回當(dāng)前對(duì)象，為了實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用。
（1）.parent()方法可以參閱jQuery parent()一章節(jié)。
（2）.css()方法可以參閱jQuery css()一章節(jié)。
（3）.絕對(duì)定位可以參閱css absolute一章節(jié)。
（4）.Math.max()方法可以參閱javascript Math.max()一章節(jié)。
（5）.outerHeight()方法可以參閱jQuery outerHeight()一章節(jié)。
（6）.scrollTop()方法可以參閱jQuery scrollTop()一章節(jié)。
（7）.resize事件可以參閱jQuery resize 事件一章節(jié)。
相關(guān)推薦
-
jQuery實(shí)現(xiàn)的具有淡出效果的元素刪除
默認(rèn)情況下，刪除元素一般都是瞬間完成的，這種效果未免不可。但是感覺有點(diǎn)生硬，下面就分享一段能夠?qū)崿F(xiàn)淡出效果的元素刪除功能。代碼如下: c
-
jQuery實(shí)現(xiàn)的多列元素高度相等
在實(shí)際應(yīng)用中，可能為了實(shí)現(xiàn)整齊劃一，會(huì)將多列的高度設(shè)置為相等。下面就通過代碼實(shí)例介紹一下如何利用jQury實(shí)現(xiàn)此功能。代碼實(shí)例如下:
-
jQuery實(shí)現(xiàn)的元素延遲指定時(shí)間之后隱藏
本章節(jié)介紹一下如何實(shí)現(xiàn)使用jQury讓指定元素延遲一段時(shí)間之后隱藏。由于代碼實(shí)在是太簡單了，完整的代碼就不給出了，只給出核心的代碼片段。實(shí)現(xiàn)方式一://這是1.3.2中我們使用stTimout來
-
angularJS的$attrs方法使用代碼實(shí)例
下面就是相關(guān)此方法應(yīng)用的代碼實(shí)例，需要的朋友可以做一下參考。代碼如下: ut
-
表單元素的form屬性用法介紹
本章節(jié)介紹一下表單元素的form屬性的用法。此屬性可以返回當(dāng)前表單元素所在的form元素對(duì)象。代碼實(shí)例如下:
帝國CMS模板博客文章資訊自適應(yīng)手機(jī)HTML5網(wǎng)站SEO優(yōu)化版
2023-12-26 14:39:32
美文句子文章網(wǎng)站模板自適應(yīng)作文百科資訊源碼
2023-12-22 17:46:01
帝國CMS模板個(gè)人博客美文佳句文章資訊自適應(yīng)手機(jī)網(wǎng)站源碼
2023-12-19 18:01:32
帝國cms簡潔兩端資訊文章句子網(wǎng)美文源碼詩句模板
2023-12-13 10:58:14
帝國cms大氣簡潔資訊文章博客源碼電商資訊教程網(wǎng)站模板
2023-11-30 13:56:14
