jQuery 中的center居中方法

最新推荐文章于 2021-02-06 17:23:36 发布

原创最新推荐文章于 2021-02-06 17:23:36 发布 · 830 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

JavaScript 同时被 2 个专栏收录

6 篇文章

订阅专栏

jQuery

3 篇文章

订阅专栏

本文介绍了一个基于jQuery的自定义函数，该函数能够使元素在其父容器内水平和垂直居中显示。通过修改样式属性实现居中效果，并考虑了不同浏览器环境下的兼容性问题。


			jQuery.fn.center = function(f) {
				return this.each(function(){
					var p = f===false?document.body:this.parentNode;
					if ( p.nodeName.toLowerCase()!= "body" && jQuery.css(p,"position") == 'static' )
						p.style.position = 'relative';
					var s = this.style;
					s.position = 'absolute';
					if(p.nodeName.toLowerCase() == "body")
						var w=$(window);
					if(!f || f == "horizontal") {
						s.left = "0px";
						if(p.nodeName.toLowerCase() == "body") {
							var clientLeft = w.scrollLeft() - 10 + (w.width() - parseInt(jQuery.css(this,"width")))/2;
							s.left = Math.max(clientLeft,0) + "px";
						}else if(((parseInt(jQuery.css(p,"width")) - parseInt(jQuery.css(this,"width")))/2) > 0)
							s.left = ((parseInt(jQuery.css(p,"width")) - parseInt(jQuery.css(this,"width")))/2) + "px";
					}
					if(!f || f == "vertical") {
						s.top = "0px";
						if(p.nodeName.toLowerCase() == "body") {
							var clientHeight = w.scrollTop() - 10 + (w.height() - parseInt(jQuery.css(this,"height")))/2;
							s.top = Math.max(clientHeight,0) + "px";
						}else if(((parseInt(jQuery.css(p,"height")) - parseInt(jQuery.css(this,"height")))/2) > 0)
							s.top = ((parseInt(jQuery.css(p,"height")) - parseInt(jQuery.css(this,"height")))/2) + "px";
					}
				});
			};