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-TreeView父子联动效果保持节点状态一致
Aug 12 Javascript
使Ext的Template可以解析二层的json数据的方法
Dec 22 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
Nov 22 Javascript
javascript读取xml实现javascript分页
Dec 13 Javascript
javascript判断复选框是否选中的方法
Oct 16 Javascript
Vue方法与事件处理器详解
Dec 01 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
Jul 11 Javascript
node中modules.exports与exports导出的区别
Jun 08 Javascript
Angular5中状态管理的实现
Sep 03 Javascript
Vue中android4.4不兼容问题的解决方法
Sep 04 Javascript
vue实现数据控制视图的原理解析
Jan 07 Javascript
jquery实现简单每周轮换的日历
Sep 10 jQuery
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
2006/10/09 PHP
PHP用户指南-cookies部分
2006/10/09 PHP
php中将指针移动到数据集初始位置的实现代码[mysql_data_seek]
2012/11/01 PHP
IIS安装Apache伪静态插件的具体操作图文
2013/07/01 PHP
javascript数组与php数组的地址传递及值传递用法实例
2015/01/22 PHP
在Laravel框架里实现发送邮件实例(邮箱验证)
2016/05/20 PHP
浅谈PHP中new self()和new static()的区别
2017/08/11 PHP
PHP实现随机发放扑克牌
2020/04/21 PHP
JavaScript中的事件处理
2008/01/16 Javascript
Function.prototype.call.apply结合用法分析示例
2013/07/03 Javascript
javascript中的this详解
2014/12/08 Javascript
jQuery中:not选择器用法实例
2014/12/30 Javascript
js实现匹配时换色的输入提示特效代码
2015/08/17 Javascript
关于在Servelet中如何获取当前时间的操作方法
2016/06/28 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
2016/12/17 Javascript
Javascript 实现匿名递归的实例代码
2017/05/25 Javascript
vue.js选中动态绑定的radio的指定项
2017/06/02 Javascript
JS实现二维数组横纵列转置的方法
2018/04/17 Javascript
深入浅析angular和vue还有jquery的区别
2018/08/13 jQuery
解决webpack多页面内存溢出的方法示例
2019/10/08 Javascript
vue-cli点击实现全屏功能
2020/03/07 Javascript
Python实现的十进制小数与二进制小数相互转换功能
2017/10/12 Python
Python 错误和异常代码详解
2018/01/29 Python
python使用Tkinter实现在线音乐播放器
2018/01/30 Python
opencv改变imshow窗口大小,窗口位置的方法
2018/04/02 Python
使用python根据端口号关闭进程的方法
2018/11/06 Python
Win10系统下安装labelme及json文件批量转化方法
2019/07/30 Python
redis数据库及与python交互用法简单示例
2019/11/01 Python
使用tensorflow实现矩阵分解方式
2020/02/07 Python
JavaScript+Canvas实现自定义画板的示例代码
2019/05/13 HTML / CSS
会计专业毕业生自我鉴定
2013/10/29 职场文书
公司财务总监岗位职责
2013/12/14 职场文书
毕业生自荐信格式
2014/03/07 职场文书
先进教师个人事迹材料
2014/12/15 职场文书
幼儿园六一儿童节演讲稿
2015/03/19 职场文书
使用 Docker Compose 构建复杂的多容器App
2022/04/30 Servers