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 自动分号插入(JavaScript synat:auto semicolon insertion)
Nov 04 Javascript
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
Jul 31 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
Dec 11 Javascript
使用jquery实现图文切换效果另加特效
Jan 20 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
Nov 28 Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
Aug 22 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
Jan 18 Javascript
JavaScript驾驭网页-CSS与DOM
Mar 24 Javascript
jQuery实现链接的title快速出现的方法
Feb 20 Javascript
vue-router 中router-view不能渲染的解决方法
May 23 Javascript
深入浅析vue-cli@3.0 使用及配置说明
May 08 Javascript
javascript 函数的暂停和恢复实例详解
Apr 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中Session可能会引起并发问题
2015/07/23 PHP
js change,propertychange,input事件小议
2011/12/20 Javascript
如何使用jquery动态加载js,css文件实现代码
2013/04/03 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
2014/03/12 Javascript
JS中call/apply、arguments、undefined/null方法详解
2016/02/15 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
2016/06/12 Javascript
Ionic默认的Tabs模板使用实例
2016/08/29 Javascript
JS实现物体带缓冲的间歇运动效果示例
2016/12/22 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
2020/10/26 Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
2017/05/27 Javascript
Vue框架之goods组件开发详解
2018/01/25 Javascript
js数组常用最重要的方法
2018/02/04 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
2018/07/17 Javascript
详解js中Array的方法及技巧
2018/09/12 Javascript
vue中接口域名配置为全局变量的实现方法
2018/09/20 Javascript
微信小程序实现点击按钮后修改颜色
2019/12/05 Javascript
Vue.js仿Select下拉框效果
2020/02/18 Javascript
VUE-ElementUI 自定义Loading图操作
2020/11/11 Javascript
改进Django中的表单的简单方法
2015/07/17 Python
Python中time模块与datetime模块在使用中的不同之处
2015/11/24 Python
Python爬取网易云音乐热门评论
2017/03/31 Python
python实现对csv文件的列的内容读取
2018/07/04 Python
Python3爬虫学习之应对网站反爬虫机制的方法分析
2018/12/12 Python
Django ORM 查询管理器源码解析
2019/08/05 Python
Python 点击指定位置验证码破解的实现代码
2019/09/11 Python
Python函数递归调用实现原理实例解析
2020/08/11 Python
python smtplib发送多个email联系人的实现
2020/10/09 Python
Python制作简单的剪刀石头布游戏
2020/12/10 Python
如何用 Python 制作 GitHub 消息助手
2021/02/20 Python
国外的一些J2EE面试题一
2012/10/13 面试题
商场中秋节活动方案
2014/02/07 职场文书
说谎欺骗人检讨书300字
2014/11/18 职场文书
简单的个人租房协议书范本
2014/11/26 职场文书
《植树问题》教学反思
2016/03/03 职场文书
pytest配置文件pytest.ini的详细使用
2021/04/17 Python
Win Server2016远程桌面如何允许多用户同时登录
2022/06/10 Servers