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 showModalDialog,open取得父窗口的方法
Mar 10 Javascript
javascript中的107个基础知识收集整理 推荐
Mar 29 Javascript
javascript setTimeout()传递函数参数(包括传递对象参数)
Apr 07 Javascript
js限制textarea每行输入字符串长度的代码
Oct 31 Javascript
使用jquery实现放大镜效果
Sep 02 Javascript
简介alert()与console.log()的不同
Aug 26 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
Nov 26 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
Mar 17 Javascript
js时间查询插件使用详解
Apr 07 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
Jan 31 Javascript
解决vue-router中的query动态传参问题
Mar 20 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
May 02 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 serialize()与unserialize()的用法
2013/06/05 PHP
destoon在各个服务器下设置URL Rewrite(伪静态)的方法
2014/06/21 Servers
PHP数组基本用法与知识点总结
2020/06/02 PHP
不要小看注释掉的JS 引起的安全问题
2008/12/27 Javascript
JS获取dom 对象 ajax操作 读写cookie函数
2009/11/18 Javascript
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
2011/11/30 Javascript
javascript判断机器是否联网的2种方法
2013/08/09 Javascript
js和jquery中循环的退出和继续下一个循环
2014/09/03 Javascript
JavaScript实现找出字符串中第一个不重复的字符
2014/09/03 Javascript
js数组依据下标删除元素
2015/04/14 Javascript
jQuery焦点图轮播特效代码分享(3款)
2015/09/05 Javascript
jQuery实现Email邮箱地址自动补全功能代码
2015/11/03 Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
2016/12/08 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
2016/12/13 Javascript
关于axios返回空对象的问题解决
2017/04/04 Javascript
vue基于Vue2.0和高德地图的地图组件实例
2017/04/28 Javascript
jQuery实现简单的Ajax调用功能示例
2019/02/15 jQuery
React学习之JSX与react事件实例分析
2020/01/06 Javascript
使用python装饰器验证配置文件示例
2014/02/24 Python
使用Python发送邮件附件以定时备份MySQL的教程
2015/04/25 Python
python生成二维码的实例详解
2017/10/29 Python
TensorFlow的权值更新方法
2018/06/14 Python
python中单例常用的几种实现方法总结
2018/10/13 Python
python图形用户接口实例详解
2019/12/16 Python
Pycharm debug调试时带参数过程解析
2020/02/03 Python
Python Selenium安装及环境配置的实现
2020/03/17 Python
Django获取model中的字段名和字段的verbose_name方式
2020/05/19 Python
基于IE10/HTML5 开发
2013/04/22 HTML / CSS
Html5 canvas实现粒子时钟的示例代码
2018/09/06 HTML / CSS
如何在发生故障的节点上重新安装 SQL Server
2013/03/14 面试题
教师简历自我评价
2014/02/03 职场文书
党员公开承诺书范文
2014/03/25 职场文书
会计演讲稿范文
2014/05/23 职场文书
优秀少先队辅导员事迹材料
2014/12/24 职场文书
毕业实习指导教师评语
2014/12/31 职场文书
Golang全局变量加锁的问题解决
2021/05/08 Golang