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的一种模块模式
Mar 22 Javascript
javascript 图片上一张下一张链接效果代码
Mar 12 Javascript
jquery实现瀑布流效果分享
Mar 26 Javascript
清除js缓存的多种方法总结
Dec 09 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
Dec 24 Javascript
Javascript中弹窗confirm与prompt的区别
Oct 26 Javascript
详解nuxt路由鉴权(express模板)
Nov 21 Javascript
深入理解Node内建模块和对象
Mar 12 Javascript
element-ui组件table实现自定义筛选功能的示例代码
Mar 15 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
Sep 16 Javascript
jQuery实现容器间的元素拖拽功能
Dec 01 jQuery
Javascript 解构赋值详情
Nov 17 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 - Html Transfer Code
2006/10/09 PHP
php数组函数序列之array_unshift() 在数组开头插入一个或多个元素
2011/11/07 PHP
简单的php数据库操作类代码(增,删,改,查)
2013/04/08 PHP
php的zip解压缩类pclzip使用示例
2014/03/14 PHP
Linux下手动编译安装PHP扩展的例子分享
2014/07/15 PHP
PHP+shell脚本操作Memcached和Apache Status的实例分享
2016/03/11 PHP
调用js时ie6和ie7,ff的区别
2009/08/19 Javascript
深入理解JavaScript系列(6) 强大的原型和原型链
2012/01/15 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
2014/08/12 Javascript
JS动态创建DOM元素的方法
2015/06/09 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
2016/10/11 Javascript
老生常谈的跨域处理
2017/01/11 Javascript
Kotlin学习第一步 kotlin语法特性
2017/05/25 Javascript
jQuery简单实现根据日期计算星期几的方法
2019/01/09 jQuery
Vue内部渲染视图的方法
2019/09/02 Javascript
在vue中动态添加class类进行显示隐藏实例
2019/11/09 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
2020/07/27 Javascript
[03:10]2014DOTA2 TI马来劲旅Titan首战告捷目标只是8强
2014/07/10 DOTA
[02:43]2014DOTA2国际邀请赛 官方Alliance战队纪录片
2014/07/14 DOTA
[05:40]DOTA2荣耀之路6:Wings最后进攻
2018/05/30 DOTA
使用Python和Prometheus跟踪天气的使用方法
2019/05/06 Python
在python3中实现查找数组中最接近与某值的元素操作
2020/02/29 Python
在echarts中图例legend和坐标系grid实现左右布局实例
2020/05/16 Python
Django中的AutoField字段使用
2020/05/18 Python
HTML5 本地存储实现购物车功能
2017/09/07 HTML / CSS
html5实现微信打飞机游戏
2014/03/27 HTML / CSS
详解Canvas 跨域脱坑实践
2018/11/07 HTML / CSS
为什么要用EJB
2014/04/17 面试题
办公室保洁员岗位职责
2013/12/02 职场文书
实习生个人的自我评价
2013/12/08 职场文书
党支部评议意见
2015/06/02 职场文书
运动会宣传稿100字
2015/07/23 职场文书
2016简单的租房合同范本
2016/03/18 职场文书
Redis高级数据类型Hyperloglog、Bitmap的使用
2021/05/24 Redis
Mysql忘记密码解决方法
2022/02/12 MySQL
使用vue判断当前环境是安卓还是IOS
2022/04/12 Vue.js