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 相关文章推荐
在VS2008中使用jQuery智能感应的方法
Dec 30 Javascript
鼠标放在图片上显示大图的JS代码
Mar 26 Javascript
JavaScript分页功能的实现方法
Apr 25 Javascript
jQuery菜单插件用法实例
Jul 25 Javascript
实例讲解jquery与json的结合
Jan 07 Javascript
js实现非常棒的弹出div
Oct 06 Javascript
Angular.js中处理页面闪烁的方法详解
Mar 09 Javascript
JavaScript调试之console.log调试的一个小技巧分享
Aug 07 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
Aug 25 Javascript
vue文件运行的方法教学
Feb 12 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
Jul 21 Javascript
vue element el-transfer增加拖拽功能
Jan 15 Vue.js
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实现二分查找算法代码分享
2011/06/24 PHP
phpmailer中文乱码问题的解决方法
2014/04/22 PHP
教你识别简单的免查杀PHP后门
2015/09/13 PHP
Yii使用DeleteAll连表删除出现报错问题的解决方法
2016/07/14 PHP
php cookie 详解使用实例
2016/11/03 PHP
Yii2――使用数据库操作汇总(增删查改、事务)
2016/12/19 PHP
php实现构建排除当前元素的乘积数组方法
2018/10/06 PHP
Prototype使用指南之form.js
2007/01/10 Javascript
IE DOM实现存在的部分问题及解决方法
2009/07/25 Javascript
Javascript window对象详解
2014/11/12 Javascript
jQuery中:focus选择器用法实例
2014/12/30 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
2015/08/18 Javascript
JS自定义混合Mixin函数示例
2016/11/26 Javascript
jQuery时间日期三级联动(推荐)
2016/11/27 Javascript
jQuery特殊符号转义的实现
2016/11/30 Javascript
详解nuxt sass全局变量(公共scss解决方案)
2018/06/27 Javascript
JavaScript创建对象方法实例小结
2018/09/03 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
2018/12/29 Javascript
优雅的使用javascript递归画一棵结构树示例代码
2019/09/22 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
2019/09/25 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
2019/11/15 Javascript
vue flex 布局实现div均分自动换行的示例代码
2020/08/05 Javascript
原生js中运算符及流程控制示例详解
2021/01/05 Javascript
Python 用户登录验证的小例子
2013/03/06 Python
python 自动化将markdown文件转成html文件的方法
2016/09/23 Python
浅谈pandas中DataFrame关于显示值省略的解决方法
2018/04/08 Python
python xlsxwriter创建excel图表的方法
2018/06/11 Python
Python使用googletrans报错的解决方法
2018/09/25 Python
详解python做UI界面的方法
2019/02/27 Python
Python OrderedDict字典排序方法详解
2020/05/21 Python
Keras使用ImageNet上预训练的模型方式
2020/05/23 Python
ONLY瑞典官网:世界知名服装品牌
2018/06/19 全球购物
建筑人员岗位职责
2013/12/25 职场文书
教师档案管理制度
2014/01/23 职场文书
毕业寄语大全
2014/04/09 职场文书
2014领导干部四风问题查摆思想汇报
2014/09/13 职场文书