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 相关文章推荐
javascript自定义startWith()和endWith()的两种方法
Nov 11 Javascript
在ASP.NET中使用JavaScript脚本的方法
Nov 12 Javascript
动态读取JSON解析键值对的方法
Jun 03 Javascript
jQuery深拷贝Json对象简单示例
Jul 06 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
Nov 30 Javascript
ES6新特性三: Generator(生成器)函数详解
Apr 21 Javascript
浅谈关于axios和session的一些事
Jul 13 Javascript
vue.js项目nginx部署教程
Apr 05 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
Nov 02 Javascript
微信小程序实现下拉加载更多商品
Dec 29 Javascript
vue 计算属性和侦听器的使用小结
Jan 25 Vue.js
浅谈Web Storage API的使用
Jun 23 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
德劲1103二次变频版的打磨
2021/03/02 无线电
php中json_encode中文编码问题分析
2011/09/13 PHP
php 文件缓存函数
2011/10/08 PHP
分享下PHP register_globals 值为on与off的理解
2013/09/26 PHP
PHP随机生成唯一HASH值自定义函数
2015/04/20 PHP
JQuery中DOM事件冒泡实例分析
2015/06/13 Javascript
AngularJS之页面跳转Route实例代码
2017/03/10 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
2017/07/17 Javascript
js最全的数组的降维5种办法(小结)
2020/04/28 Javascript
vue使用canvas实现移动端手写签名
2020/09/22 Javascript
[06:07]辉夜杯现场观众互动 “比谁远送显示器”
2015/12/26 DOTA
在mac下查找python包存放路径site-packages的实现方法
2018/11/06 Python
Python编程在flask中模拟进行Restful的CRUD操作
2018/12/28 Python
django框架model orM使用字典作为参数,保存数据的方法分析
2019/06/24 Python
python中selenium操作下拉滚动条的几种方法汇总
2019/07/14 Python
Django打印出在数据库中执行的语句问题
2019/07/25 Python
python实现桌面气泡提示功能
2019/07/29 Python
详解Python time库的使用
2019/10/10 Python
python多进程重复加载的解决方式
2019/12/13 Python
selenium+Chrome滑动验证码破解二(某某网站)
2019/12/17 Python
浅谈图像处理中掩膜(mask)的意义
2020/02/19 Python
Python jieba结巴分词原理及用法解析
2020/11/05 Python
机械设计制造专业个人求职信
2013/09/25 职场文书
工业自动化专业毕业生推荐信
2013/11/18 职场文书
大学生的创业计划书就该这么写
2014/01/30 职场文书
军训自我鉴定200字
2014/02/13 职场文书
书法大赛策划方案
2014/06/04 职场文书
政府法律服务方案
2014/06/14 职场文书
建筑工地标语
2014/06/18 职场文书
法人代表证明书
2014/09/18 职场文书
大一新生检讨书
2014/10/29 职场文书
企业法人代表证明书
2015/06/18 职场文书
医务人员岗前培训心得体会
2016/01/08 职场文书
Nginx服务器如何设置url链接
2021/03/31 Servers
Mysql服务添加 iptables防火墙策略的方案
2021/04/29 MySQL
在python中实现导入一个需要传参的模块
2021/05/12 Python