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乱码的一次解决过程 图解教程
Feb 20 Javascript
javascript校验价格合法性实例(必须输入2位小数)
May 05 Javascript
js中unicode转码方法详解
Oct 09 Javascript
聊一聊Vue.js过渡效果
Sep 07 Javascript
关于vue-router路径计算问题
May 10 Javascript
基于EasyUI的基础之上实现树形功能菜单
Jun 28 Javascript
微信小程序 本地图片按照屏幕尺寸处理
Aug 04 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
Mar 01 Javascript
Vue全局分页组件的实现代码
Aug 10 Javascript
JavaScript遍历DOM元素的常见方式示例
Feb 16 Javascript
分享一个vue项目“脚手架”项目的实现步骤
May 26 Javascript
JS实现简单的表格增删
Jan 16 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
CI(CodeIgniter)框架视图中加载视图的方法
2017/03/24 PHP
php+ajax实现仿百度查询下拉内容功能示例
2017/10/20 PHP
IE不出现Flash激活框的小发现的js实现方法
2007/09/07 Javascript
javascript Prototype 对象扩展
2009/05/15 Javascript
javascript自定义的addClass()方法
2014/05/28 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
2015/11/05 Javascript
jquery ztree实现模糊搜索功能
2016/02/25 Javascript
在IE8上JS实现combobox支持拼音检索功能
2016/05/23 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
2016/05/23 Javascript
js友好的时间返回函数
2016/08/24 Javascript
15个非常实用的JavaScript代码片段
2016/12/18 Javascript
JavaScript实现256色转灰度图
2017/02/22 Javascript
vue之nextTick全面解析
2017/05/17 Javascript
详解angularJS自定义指令间的相互交互
2017/07/05 Javascript
基于vue的验证码组件的示例代码
2019/01/22 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
2019/04/16 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
2019/09/23 Javascript
vue+element 实现商城主题开发的示例代码
2020/03/26 Javascript
[06:10]6.81新信使新套装!给你一个炫酷的DOTA2
2014/05/06 DOTA
python进阶教程之异常处理
2014/08/30 Python
Python实现提取文章摘要的方法
2015/04/21 Python
在Mac OS上部署Nginx和FastCGI以及Flask框架的教程
2015/05/02 Python
python搭建微信公众平台
2016/02/09 Python
Django自定义过滤器定义与用法示例
2018/03/22 Python
python读取视频流提取视频帧的两种方法
2020/10/22 Python
Python变量作用域LEGB用法解析
2020/02/04 Python
python判断变量是否为int、字符串、列表、元组、字典的方法详解
2020/02/13 Python
python-sys.stdout作为默认函数参数的实现
2020/02/21 Python
Python自动化测试中yaml文件读取操作
2020/08/20 Python
加拿大在线旅游公司:Flighthub
2019/03/11 全球购物
小学学校评估方案
2014/06/08 职场文书
建筑工地质量标语
2014/06/12 职场文书
扬尘污染防治方案
2014/06/15 职场文书
护士求职简历自我评价
2015/03/10 职场文书
不知如何爱孩子,这些方法教会您
2019/08/06 职场文书
2019年公司快递收发管理制度模板
2019/11/20 职场文书