本来jQuery有一个certer插件,不过少了一个功能,就是基于视口(ViewPort)的居中.
改写一下,代码如下:
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";
}
});
};
使用,
$(expr).center();
$(expr).center(false);
如果expr 的 parentNode 是body 或者参数是 false的话就会真的 ViewPort 居中.
另外加的偏移量 10 是个偷懒的方法,比如有了滚动条,会好一些,没有的话视觉上也差别不大,不过没有这个偏移量又有
滚动条的话
视觉上就不太舒服了
分享到:
- 2008-11-26 19:15
- 浏览 1943
- 评论(2)
- 论坛回复 / 浏览 (2 / 2300)
- 查看更多
相关推荐
jquery插件实现仪表盘 jquery插件实现仪表盘,供大家参考,具体内容如下 做了个简易的仪表盘,就是很常见的那种码表,实现没啥困难,就是需要算一点点位置 *{ margin: 0; padding: 0; } .rel{ display: ...
快速返回顶部jquery插件</title> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/...
Center-Loader是一款可以将Loading指示器相对于容器绝对居中的jQuery插件。该插件可以使用图片或font-awesome字体图标来作为Loading指示器,并且可以将指示器相对于某个容器或整个页面绝对居中。
jQuery的:CenterIt 一个非常简单的jQuery插件,可在父元素内垂直和水平居中放置选定的元素。
js代码 [removed][removed] [removed][removed] [removed][removed] ...'contentTextAlign' : 'center', //内容对齐方式 ...这是一款基于jQuery兼容电脑手机端轻量级弹层组件代码,alert.js弹出层插件。
jQuery 1 9 1英文版帮助文档 包括3个部分内容:学习中心(Learning Center) JQuery API JQuery UI API 其中学习中心有JS入门基础 JQuery的相关核心概念 J插件常识和性能方面建议 JQuery Mobile 移动开发)等 内容比...
每天一个jquery插件-步骤进度轴 步骤进度轴 很多工具型的网站入门教程或者注册账号走流程的时候会有这个结构存在,所以做了一个来尝试一下,回调动作也能用吧 效果如下 代码部分 *{ margin: 0; padding: 0;...
<link rel="stylesheet" href="jquery.mytooltip.css?3.1.64"> <link rel="stylesheet" ... jquery.mytooltip插件是一款支持上下左右不同方向显示提示信息的jQuery鼠标悬停文字提示代码,是很多种效果。
<script src="Scripts/jquery-1.6.2.min.js" type="text/javascript"> .j_prompt_select { width: 350px; z-index:100; border: #7f9db9 1px solid; background: #fff; font-size: 12px; font-family: ...
Toast-一个Bootstrap 4.2+ jQuery插件关于自举4.2,已经引入这个插件的目的是使它们更容易使用。用法Gloabls 修改全局变量以将特定的规则/样式应用于您的所有吐司。 $ . toastDefaults = { position : 'top-right' ,...
一个jQuery插件,可让您使用零编码来创建“趋势与响应式” App Showcase或App Center。 它从JSON文件中获取数据,并以两个不同的主题生成完全响应式和时尚的App Store。 该插件与Bootstrap,Foundation以及其他...
这是一个供将来参考的jQuery插件示例。如何激活? $('.center-image').center(); 默认选项vartical:正确水平:真动画:错误使用选项激活$('.center-image').center({vartical: false,animate: true});
js代码 [removed][removed] [removed][removed] [removed][removed] ...'contentTextAlign' : 'center', //内容对齐方式 ... 这是一款基于jQuery兼容电脑手机端轻量级弹层组件代码,alert.js弹出层插件。
本文实例讲述了jQuery插件实现控制网页元素动态居中显示的方法。分享给大家供大家参考。具体实现方法如下: (function($) { $.fn._center = function(self, parent, dimension) { if(!dimension.vertical && !...
本文实例讲述了jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法。分享给大家供大家参考,具体如下: 我们在使用EasyUI Tabs框架时,在框架最顶层的弹出窗体中需要操作当前Tab的iframe窗体内容或方法,这时候我们...
这是一款基于jQuery兼容电脑手机端轻量级弹层组件代码,alert.js弹出层插件。 [removed][removed] [removed][removed] [removed][removed] [removed][removed] [removed][removed] 'style' : 'wap',...
noty是一个jQuery的通知(信息提示)插件,灵活轻便,是一个非常棒的用于替代传统提示对话框的插件。 当前最新版本为2.1.0: 从 https://github.com/needim/noty 可以获取最新源代码。 布局样式 支持的提示样式,每种...
上传插件</title> <style> .upload-btn {border: 1px solid #5BC0DE;border-radius: 4px;cursor: pointer;display: inline-block; font-size: 14px;padding: 6px 12px;text-align: center;height:24...
内容索引:脚本资源,Ajax/JavaScript,分栏,拖拽,jQuery jQuery写的小插件,支持拖拽分栏的小插件,项目需求 只是做一个上下分栏拖拽的移动,想到以后可以继续使用,做成插件,支持上下左右两种移动方式,希望能给...
不再推荐 考虑使用有填充工具如 用法 var $element = $ ( '.something' ) ; $element .... // Update on resize $ ( window ) .... /* Center it, like `background-position: center` */ position : ab