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 相关文章推荐
封装了jQuery的Ajax请求全局配置
Feb 05 Javascript
JQuery创建DOM节点的方法
Jun 11 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
Sep 24 Javascript
angularjs学习笔记之简单介绍
Sep 26 Javascript
浅谈JavaScript 浏览器对象
Jun 03 Javascript
详解使用JS如何制作简单的ASCII图与单极图
Mar 31 Javascript
Three.js基础学习教程
Nov 16 Javascript
Vue header组件开发详解
Jan 26 Javascript
Vue.js组件通信之自定义事件详解
Oct 19 Javascript
JS对日期操作封装代码实例
Nov 08 Javascript
koa2的中间件功能及应用示例
Mar 05 Javascript
关于angular 8.1使用过程中的一些记录
Nov 25 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中反射的应用
2013/06/18 PHP
PHP上传图片类显示缩略图功能
2016/06/30 PHP
js中复制行和删除行的操作实例
2013/06/25 Javascript
jquery删除数据记录时的弹出提示效果
2014/05/06 Javascript
AngularJS初始化过程分析(引导程序)
2014/12/06 Javascript
jQuery实现tag便签去重效果的方法
2015/01/20 Javascript
浅谈javascript 迭代方法
2015/01/21 Javascript
jQuery实现连续动画效果实例分析
2015/10/09 Javascript
详解AngularJS Filter(过滤器)用法
2015/12/28 Javascript
jquery树形菜单效果的简单实例
2016/06/06 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
2016/07/15 Javascript
Angular ng-repeat指令实例以及扩展部分
2016/12/26 Javascript
Require.JS中的几种define定义方式示例
2017/06/01 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
2017/08/14 Javascript
js循环map 获取所有的key和value的实现代码(json)
2018/05/09 Javascript
js中的闭包实例展示
2018/11/01 Javascript
Vue中遍历数组的新方法实例详解
2019/07/21 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
2020/02/27 Javascript
python实现simhash算法实例
2014/04/25 Python
高性能web服务器框架Tornado简单实现restful接口及开发实例
2014/07/16 Python
Python3安装psycopy2以及遇到问题解决方法
2019/07/03 Python
美国电子产品主要品牌的授权在线零售商:DataVision
2019/03/23 全球购物
Dr. Martens马汀博士法国官网:马丁靴鼻祖
2020/01/15 全球购物
高中生校园生活自我评价
2013/09/19 职场文书
家长会演讲稿范文
2014/01/10 职场文书
项目建议书范文
2014/05/12 职场文书
2014年科普工作总结
2014/12/06 职场文书
小学公民道德宣传日活动总结
2015/03/23 职场文书
公司搬迁通知
2015/04/20 职场文书
2015年小学数学教师个人工作总结
2015/05/25 职场文书
运动会1000米加油稿
2015/07/21 职场文书
关于食品安全的演讲稿范文(三篇)
2019/10/21 职场文书
安装pytorch时报sslerror错误的解决方案
2021/05/17 Python
sass 常用备忘案例详解
2021/09/15 HTML / CSS
业余无线电通联Q语
2022/02/18 无线电
Go调用Rust方法及外部函数接口前置
2022/06/14 Golang