`
78425665
  • 浏览: 125384 次
  • 性别: 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的div 重直水平居中

    jQuery结合CSS可以提供灵活的方法来实现垂直和水平居中,无论是对于固定尺寸的div还是响应式的流体div。本篇将详细介绍如何使用jQuery和CSS实现这一目标。 首先,我们从纯CSS解决方案开始。在CSS3中,我们可以利用`...

    jQuery鼠标悬停居中放大显示内容代码

    在网页设计中,提升用户体验是至关重要的,而jQuery库提供了丰富的功能来实现这一目标。"jQuery鼠标悬停居中放大显示内容代码"就是一个很好的例子,它允许用户在鼠标悬停在某个模块上时,该模块会自动居中并放大,以...

    jQuery鼠标悬停居中放大显示内容代码.zip

    《jQuery鼠标悬停居中放大显示内容代码》 在网页设计中,为了增强用户体验,我们经常需要实现一些交互效果,比如鼠标悬停时元素居中放大显示内容。jQuery作为一个轻量级、功能丰富的JavaScript库,提供了许多便利的...

    jquery 代码解决placeholder不换行,不居中问题

    通过上述分析与实践,我们可以有效地使用 jQuery 来解决 placeholder 在输入框中的不换行和不居中问题。这对于提升用户体验具有重要意义,同时也为开发者提供了更为灵活的设计空间。在未来的工作中,我们还可以...

    jquery.table2excel.js 导出可居中

    bootstraptable 可以直接导出的插件,导出内容自动居中处理 https://blog.csdn.net/qq_39087348/article/details/112970600

    浏览器窗口放大缩小后页面内容居中解决方法

    - 有些情况下,开发者可能会选择使用jQuery插件,如`centerInViewport`等,它们提供了简便的方法来实现元素的居中对齐。 5. **性能优化**: - 频繁的`resize`事件可能导致性能问题。可以通过防抖(debounce)或节流...

    jQuery弹出层垂直居中效果.zip

    在这个"jQuery弹出层垂直居中效果.zip"文件中,我们很可能会找到一个示例,展示如何利用jQuery来实现弹出层的垂直居中。 首先,我们需要理解CSS在垂直居中布局中的角色。传统的CSS布局方法如表格或绝对定位可以实现...

    一个jquery.fullPage实例,解决了居中问题。分享给大家。

    首先,我们需要理解CSS中的几种居中对齐方法: 1. **水平居中**:对于固定宽度的元素,可以使用`margin: auto`。对于块级元素,设置`display: block`并加上左右边距自动(`margin: 0 auto`);对于行内元素,可以...

    jquery实现div上下左右居中显示的插件.zip

    标题中的“jquery实现div上下左右居中显示的插件.zip”指的是一个基于jQuery的JavaScript插件,用于在网页中使div元素实现垂直和水平居中显示。这种功能在网页设计和开发中非常常见,尤其在创建响应式布局或动态内容...

    jQuery鼠标悬停图片居中放大代码

    "jQuery鼠标悬停图片居中放大代码"是一种常见的交互设计,能够提升用户对网站的感知和兴趣。这种技术通过使用JavaScript库jQuery,结合CSS样式和HTML结构,实现当鼠标悬停在图片上时,图片会自动居中并放大,为用户...

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

    标题提到的"jQuery-CenterIt"是一个jQuery插件,专为实现元素在父容器中的垂直和水平居中而设计。下面我们将深入探讨这个插件的工作原理、使用方法以及相关的JavaScript和jQuery知识。 首先,了解jQuery插件的基本...

    懒人原生块级区域内元素上下左右垂直居中方法.zip

    例如,有些jQuery插件如`centerize`或`jquery.center`可以自动处理不同屏幕尺寸下的居中对齐,使开发者无需关心具体实现细节。 在提供的文件列表中,`index.html`可能是演示这个居中效果的网页文件。打开这个文件,...

    jquery左侧居中链接图片动画效果.zip

    《jQuery实现左侧居中链接图片动画效果详解》 在网页设计中,动态效果往往能吸引用户的注意力,提升用户体验。本文将深入探讨如何利用jQuery库创建一个始终保持在网页左侧且具有动画效果的链接图片。这个效果使得...

    弹出层居中

    标题“弹出层居中”涉及的是网页设计中常见的用户界面元素布局问题,特别是使用JavaScript库如jQuery实现的弹出窗口或对话框的居中显示。在这个场景中,"TestJQueryMaskLayer"可能是一个使用jQuery实现的遮罩层插件...

    jQuery居中元素scrollleft计算方法示例

    在jQuery居中元素的 `scrollleft` 计算方法中,我们通常遵循以下步骤: 1. **获取选中元素**:首先,我们需要找到要居中的元素,这里使用类 `.selected` 来标识。在示例中,我们使用 `$(".selected")` 来获取这个...

    VMiddleImg图片居中裁切效果

    综上所述,"VMiddleImg图片居中裁切效果"是一种利用HTML、CSS和JavaScript技术,确保图片在网页中以居中且适应容器的方式展示的方法。通过合理的布局和样式控制,可以创建出既美观又适应不同屏幕尺寸的网页。在给定...

    jquery图片等比例缩放图片左右垂直居中

    对于水平居中,可以使用`margin: 0 auto`或者`justify-content: center`(在flex布局中)来实现。 jQuery插件实现这个功能通常会包含以下步骤: 1. 获取图片容器的宽度和高度。 2. 计算图片的原始宽高比。 3. 如果...

    jquery实现垂直居中显示特效代码

    本篇文章将深入探讨如何使用jQuery和CSS结合实现垂直居中的效果,以及如何在网页模板中应用这些技术。 首先,我们需要理解垂直居中的基本概念。在CSS中,有多种方法可以实现垂直居中,如Flexbox、Grid布局、传统...

    使用bootstrap的H5页面登录框自适应水平居中、垂直居中

    在实际项目中,你可以根据需求选择合适的方法,并结合JavaScript或者jQuery动态调整元素位置,以确保在窗口大小改变时仍保持居中。 为了实现这个功能,你可能需要以下CSS代码示例: ```css .login-box { position...

    jQuery实现弹窗居中效果类似alert()

    1. 使用jQuery实现弹窗居中显示的原理和方法。 2. CSS中如何使用`position: fixed;`和`position: absolute;`来分别设置遮罩层和弹窗内容层。 3. 如何通过JavaScript动态计算元素的位置,使其在页面中居中。 4. 使用`...

Global site tag (gtag.js) - Google Analytics