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子窗口ModalDialog中操作父窗口对像
Dec 11 Javascript
jQuery 全选/反选以及单击行改变背景色实例
Jul 02 Javascript
自己封装的javascript事件队列函数版
Jun 12 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
Mar 31 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
Oct 28 Javascript
AngularJS ng-repeat数组有重复值的解决方法
Oct 23 Javascript
bootstrap table使用入门基本用法
May 24 Javascript
表格展示利器 Bootstrap Table实例代码
Sep 06 Javascript
AngualrJs清除定时器遇到的坑
Oct 13 Javascript
iview同时验证多个表单问题总结
Sep 29 Javascript
vue全局使用axios的方法实例详解
Nov 22 Javascript
Vue基于iview table展示图片实现点击放大
Aug 05 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
77A一级收信机修理记
2021/03/02 无线电
PHP上传图片时判断上传文件是否为可用图片的方法
2016/10/20 PHP
php观察者模式应用场景实例详解
2017/02/03 PHP
PHP获取当前URL路径的处理方法(适用于多条件筛选列表)
2017/02/10 PHP
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
2009/09/15 Javascript
jquery select(列表)的操作(取值/赋值)
2011/03/16 Javascript
javascript 拖动表格行实现代码
2011/05/05 Javascript
利用NodeJS的子进程(child_process)调用系统命令的方法分享
2013/06/05 NodeJs
深入理解javascript中return的作用
2013/12/30 Javascript
jQuery获取动态生成的元素示例
2014/06/15 Javascript
JavaScript数组常用操作技巧汇总
2014/11/17 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
2015/03/27 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
2015/12/17 Javascript
JavaScript:Date类型全面解析
2016/05/19 Javascript
关于JavaScript 原型链的一点个人理解
2016/07/31 Javascript
js初始化验证实例详解
2016/11/26 Javascript
assert()函数用法总结(推荐)
2017/01/25 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
2017/03/28 Javascript
JS实现闭包中的沙箱模式示例
2017/09/07 Javascript
详解如何配置vue-cli3.0的vue.config.js
2018/08/23 Javascript
vue项目前端埋点的实现
2019/03/06 Javascript
vue router总结 $router和$route及router与 router与route区别
2019/07/05 Javascript
jquery中attr、prop、data区别与用法分析
2019/09/25 jQuery
详解Vue之计算属性
2020/06/20 Javascript
Python 将Matrix、Dict保存到文件的方法
2018/10/30 Python
PyCharm+PySpark远程调试的环境配置的方法
2018/11/29 Python
pycharm远程开发项目的实现步骤
2019/01/20 Python
python中的列表与元组的使用
2019/08/08 Python
深入理解Tensorflow中的masking和padding
2020/02/24 Python
Python实现http接口自动化测试的示例代码
2020/10/09 Python
HTML5 HTMLCollection和NodeList的区别详解
2020/04/29 HTML / CSS
英国翻新电子产品购物网站:Tech Trade
2017/12/25 全球购物
空气环保标语
2014/06/12 职场文书
离婚协议书该怎么写
2014/10/04 职场文书
小学生读书笔记
2015/07/01 职场文书
Python中request的基本使用解决乱码问题
2022/04/12 Python