jquery计算出left和top,让一个div水平垂直居中的简单实例


Posted in Javascript onJuly 13, 2016

实例如下:

if($("#cont1").css("position")!="fixed"){
        $("#cont1").css("position","absolute");
        var dw = $(window).width();
        var ow = $("#cont1").outerWidth();
        var dh = $(window).height();
        var oh = $("#cont1").outerHeight();
        var l = (dw - ow) / 2;
        var t = (dh - oh) / 2 > 0 ? (dh - oh) / 2 : 10;
        var lDiff = $("#cont1").offset().left - $("#cont1").position().left;
        var tDiff = $("#cont1").offset().top - $("#cont1").position().top;
        l = l + $(window).scrollLeft() - lDiff;
        t = t + $(window).scrollTop() - tDiff;
        $("#cont1").css("left",l + "px");
        $("#cont1").css("top",t + "px");
      }

以上这篇jquery计算出left和top,让一个div水平垂直居中的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js如何判断用户是否是用微信浏览器
Jun 05 Javascript
JavaScript中的继承方式详解
Feb 11 Javascript
JavaScript中getUTCMinutes()方法的使用详解
Jun 10 Javascript
对JavaScript客户端应用编程的一些建议
Jun 24 Javascript
Nginx上传文件全部缓存解决方案
Aug 17 Javascript
JavaScript实现点击按钮就复制当前网址
Dec 14 Javascript
基于javascript显示当前时间以及倒计时功能
Mar 18 Javascript
AngularJS实现单独作用域内的数据操作
Sep 05 Javascript
基于input动态模糊查询的实现方法
Dec 12 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
Jan 21 Javascript
JS画布动态实现黑客帝国背景效果
Nov 08 Javascript
关于uniApp editor微信滑动问题
Jan 15 Javascript
Javascript类型系统之undefined和null浅析
Jul 13 #Javascript
JS基础随笔(菜鸟必看篇)
Jul 13 #Javascript
Bootstrap的Refresh Icon也spin起来
Jul 13 #Javascript
jQuery实现div横向拖拽排序的简单实例
Jul 13 #Javascript
用jQuery向div中添加Html文本内容的简单实现
Jul 13 #Javascript
使用jQuery加载html页面到指定的div实现方法
Jul 13 #Javascript
用原生JS对AJAX做简单封装的实例代码
Jul 13 #Javascript
You might like
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
多浏览器支持的右下角浮动窗口
2010/04/01 Javascript
JSONP 跨域共享信息
2012/08/16 Javascript
js捕获鼠标滚轮事件代码
2013/12/16 Javascript
JS动态修改iframe内嵌网页地址的方法
2015/04/01 Javascript
bootstrap PrintThis打印插件使用详解
2017/02/20 Javascript
Vue之Watcher源码解析(2)
2017/07/19 Javascript
label+input实现按钮开关切换效果的实例
2017/08/16 Javascript
浅析node.js的模块加载机制
2018/05/25 Javascript
vue和webpack打包项目相对路径修改的方法
2018/06/15 Javascript
layer弹出层父子页面事件相互调用方法
2018/08/17 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
2019/04/10 jQuery
三步搞定:Vue.js调用Android原生操作
2020/09/07 Javascript
Python中apply函数的用法实例教程
2014/07/31 Python
浅谈Python中copy()方法的使用
2015/05/21 Python
详解python中的time和datetime的常用方法
2019/07/08 Python
Python PIL图片添加字体的例子
2019/08/22 Python
推荐8款常用的Python GUI图形界面开发框架
2020/02/23 Python
基于Python的接口自动化读写excel文件的方法
2021/01/15 Python
html5移动端价格输入键盘的实现
2019/09/16 HTML / CSS
Tory Burch美国官方网站:美国时尚生活品牌
2016/08/01 全球购物
美国最便宜的旅游网站:CheapTickets
2017/07/09 全球购物
含精油的天然有机化妆品:Indemne
2019/08/27 全球购物
机械工程系毕业生求职信
2013/09/27 职场文书
护理专业的自荐信
2013/10/22 职场文书
大学本科生的个人自我评价
2013/12/09 职场文书
特色冷饮店创业计划书
2014/01/28 职场文书
《小儿垂钓》教学反思
2014/02/23 职场文书
大学生就业策划书范文
2014/04/04 职场文书
全国文明单位申报材料
2014/05/31 职场文书
图书馆标语
2014/06/19 职场文书
如何书写邀请函?
2019/06/24 职场文书
深入理解python协程
2021/06/15 Python
vscode中使用npm安装babel的方法
2021/08/02 Javascript
HTML中实现音乐或视频自动播放案例详解
2022/05/30 HTML / CSS
vue @ ~ 相对路径 路径别名设置方式
2022/06/05 Vue.js