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 页面只自动刷新一次
Jul 10 Javascript
ajax中get和post的说明及使用与区别
Dec 23 Javascript
js判断两个日期是否相等的方法
Sep 10 Javascript
jquery插件推荐 jquery.cookie
Nov 09 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
May 06 Javascript
JS 拦截全局ajax请求实例解析
Nov 29 Javascript
bootstrap下拉菜单使用方法解析
Jan 13 Javascript
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
基于Vue框架vux组件库实现上拉刷新功能
Nov 28 Javascript
vue自定义filters过滤器
Apr 26 Javascript
JavaScript常见事件对象与操作实例总结
Jan 05 Javascript
d3.js实现图形拖拽
Dec 19 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
php 读取文件乱码问题
2010/02/20 PHP
PHP中使用Imagick操作PSD文件实例
2015/01/26 PHP
js 解决“options为空或不是对象”
2008/12/22 Javascript
JQuery从头学起第一讲
2010/07/04 Javascript
基于jquery的回到页面顶部按钮
2011/06/27 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
2015/03/13 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
2015/04/07 Javascript
简单谈谈json跨域
2016/03/13 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
2016/06/20 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
2016/08/01 Javascript
Jquery和Js获得元素标签名称的方法总结
2016/10/08 Javascript
原生JS和jQuery操作DOM对比总结
2017/01/19 Javascript
springmvc接收jquery提交的数组数据代码分享
2017/10/28 jQuery
vue组件父子间通信详解(三)
2017/11/07 Javascript
记React connect的几种写法(小结)
2018/09/18 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
2020/08/03 Javascript
在vue中获取wangeditor的html和text的操作
2020/10/23 Javascript
[01:18:35]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第一场 1月29日
2021/03/11 DOTA
Python 装饰器深入理解
2017/03/16 Python
Python 私有函数的实例详解
2017/09/11 Python
Python使用re模块实现信息筛选的方法
2018/04/29 Python
Pycharm在创建py文件时,自动添加文件头注释的实例
2018/05/07 Python
face++与python实现人脸识别签到(考勤)功能
2019/08/28 Python
flask 实现token机制的示例代码
2019/11/07 Python
Python字典生成式、集合生成式、生成器用法实例分析
2020/01/07 Python
关于多元线性回归分析——Python&SPSS
2020/02/24 Python
在TensorFlow中实现矩阵维度扩展
2020/05/22 Python
CSS3解析抖音LOGO制作的方法步骤
2019/04/11 HTML / CSS
HTML5为输入框添加语音输入功能的实现方法
2017/02/06 HTML / CSS
微软美国官方网站:Microsoft美国
2018/05/10 全球购物
档案接收函格式
2015/01/30 职场文书
2016思想纪律作风整顿心得体会
2016/01/23 职场文书
初中地理教学反思
2016/02/19 职场文书
2016年小学六一儿童节活动总结
2016/04/06 职场文书
在pycharm中无法import所安装的库解决方案
2021/05/31 Python
vue项目打包后路由错误的解决方法
2022/04/13 Vue.js