`
78425665
  • 浏览: 123563 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

jQuery 中的center居中方法

 
阅读更多
			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";
					}
				});
			};
分享到:
评论

相关推荐

    jQuery-CenterIt:一个非常简单的jQuery插件,可将父元素内的所选元素垂直和水平居中

    jQuery的:CenterIt 一个非常简单的jQuery插件,可在父元素内垂直和水平居中放置选定的元素。

    jQuery插件实现控制网页元素动态居中显示

    本文实例讲述了jQuery插件实现控制网页元素动态居中显示的方法。分享给大家供大家参考。具体实现方法如下: (function($) { $.fn._center = function(self, parent, dimension) { if(!dimension.vertical && !...

    js-center:jQuery 扩展到中心元素

    jQuery Center - 用于居中元素的 jQuery 扩展用法 $ ( "#one" ) . center ( ) ; //Simply center the element within its parent element$ ( "#two" ) . center ( { vertical : false } ) ; //Center only ...

    可将Loading指示器相对于容器绝对居中的jQuery插件

    Center-Loader是一款可以将Loading指示器相对于容器绝对居中的jQuery插件。该插件可以使用图片或font-awesome字体图标来作为Loading指示器,并且可以将指示器相对于某个容器或整个页面绝对居中。

    jquery实现弹出层完美居中效果

    jquery实现弹出层完美居中效果 代码如下:showDiv($(“#pop”));function showDiv(obj){ $(obj).show(); center(obj); $(window).scroll(function(){ center(obj); }); $(window).resize(function(){ center...

    center.jquery:用可爱的动画在水平和垂直方向上居中放置任何元素。 这是一个供将来参考的jQuery插件示例

    Center.jquery 用可爱的动画在水平和垂直方向上居中放置任何元素。 这是一个供将来参考的jQuery插件示例。如何激活? $('.center-image').center(); 默认选项vartical:正确水平:真动画:错误使用选项激活$('....

    jquery 元素相对定位代码

    rwindow:定位相对于窗口(align&vlign为center时垂直或水平居中); */ (function(win,$){ win.rposition=function(fix,rel,options){ var rectLeft,rectTop,rectH=fix.outerHeight(),rectW=fix.outerWidt

    bootstrap响应式布局

    4. bootstrap伸缩布局并居中:`d-flex justify-content-center align-items-center` 5. `jQuery.data(element,[key],[value])`:在元素上存放数据,返回jQuery对象。 例如:在index界面中 ```javascript ...

    jquery.alertTs

    jquery.alertTs 气泡弹出插件 ####简单使用 $('.btn1').alertTs({ position : true }); ####向下并居中 $('.btn2').alertTs({ aLoc : 'center', face : 'bottom', position : true }); ####鼠标事件 $('.btn4')....

    DCSS:增强的 CSS。 提供一种通过 JavaScript 扩展 CSS 的方法

    动态 CSS (DCSS) 动态 CSS 是增强的CSS。... Center使目标元素在其父元素内水平、垂直或两者居中。 元素具有什么样的显示属性并不重要。 职能 match("SELECTOR","PROPERTY") match-max("SELECTOR","PR

    thumbnails-carousel

    center :布尔值,默认:true backgroundControl :布尔值,默认值:false 将“居中”选项设置为true时,缩略图将位于轮播父下的居中位置(上图)。 将“ backgroundControl”选项设置为false时,插件将关闭所有控件...

    Ho-My-Timer:让我知道约会之后的时间

    jQuery-Flex-Vertical-Center用于垂直居中放置内容 ,可获取位于视频文件夹中的免费webM视频片段 ### Fork me您可以重用,启发或重建所有此项目。 为了更加有趣,所有这些都可以在js/ho-my-timer.js文件中进行配置...

    JTooltips javascript 提示框

    9 isCenter: 属性名称:是否居中, 默认值 : false; 详细解释 :如果为true给定的postion标示工具条的中心,反之则为工具条左上角焦点 JTooltipsRmove 没有任何属性,直接调用者清除掉JTooltips生成的工具条

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    +去除PageManager中方法AddAjaxAspnetControls,增加属性AjaxAspnetControls。 -这个属性和Button得ValidateForms属性类似,可以查看Asp.net compatibility中的示例。 +2009-08-25 v2.0.7 -为按钮增加...

    ExtAspNet_v2.3.2_dll

    +去除PageManager中方法AddAjaxAspnetControls,增加属性AjaxAspnetControls。 -这个属性和Button得ValidateForms属性类似,可以查看Asp.net compatibility中的示例。 +2009-08-25 v2.0.7 -为按钮增加...

Global site tag (gtag.js) - Google Analytics