jquery将一个DIV显示在屏幕中间(居中)
时间:2017-11-06
div垂直居中是网站前端开发经常出现的需求之一,一般解决这类垂直居中的问题,我们都是使用css,但是有时候我们不得不使用js来实现,本文章向大家介绍jquery实现div在屏幕上左右居中和垂直居中,需要的朋友可以参考一下。
jquery 中怎么让一个容器div显示在当前屏幕正中央,实现方法有很多种,本文章随便罗列几种方法。
第一种方法:jquery函数法
我喜欢给jQuery添加函数,函数如下:
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) +
$(window).scrollTop()) + "px");
this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) +
$(window).scrollLeft()) + "px");
return this;
}
只需要这样调用这个函数即可:
$(element).center();
第二种方法:jQueryUI定位工具法
$('your-selector').position({
of: $(window)
});
例如:
<div id="test" style="position:absolute;background-color:blue;color:white">
test div to center in window
</div>
<script type="text/javascript">
$(function(){
$("#test").position({
of: $(window)
});
};
</script>
以上是关于jquery将一个DIV显示在屏幕中间(居中)的两种方法,希望对大家有所帮助。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 超性感的React Hooks(十)useRef
- 七日Python之路--第三天(之初试Django 2-1)
- 超性感的React Hooks(十一)useCallback、useMemo
- 七日Python之路--第二天
- 八、通过断点调试观察JS执行过程
- 传智播客OA项目学习--阶段三(Struts中Action书写)
- 九、函数与函数式编程
- 关于Hibernate懒加载----Spring filter
- 十、详解函数柯里化
- Unable to load file:*struts.xml-[unknown location]
- 使用hooks重新定义antd pro想象力(一)
- 传智播客OA项目学习--阶段三(级联操作)
- 七日Python之路--第十一天
- 使用hooks重构antd pro的想象力(三)我是如何利用hooks干掉redux的
- 七日Python之路--第十天