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 相关文章推荐
js用图作提交按钮或超连接
Mar 26 Javascript
JavaScript DOM学习第四章 getElementByTagNames
Feb 19 Javascript
js实现简单登录功能的实例代码
Nov 09 Javascript
如何判断元素是否为HTMLElement元素
Dec 06 Javascript
Javascript中的方法和匿名方法实例详解
Jun 13 Javascript
浅谈jquery选择器 :first与:first-child的区别
Nov 20 Javascript
实例学习JavaScript读取和写入cookie
Jan 29 Javascript
React Native基础入门之调试React Native应用的一小步
Jul 02 Javascript
基于axios 解决跨域cookie丢失的问题
Sep 26 Javascript
Vue formData实现图片上传
Aug 20 Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
vue中 this.$set的使用详解
Nov 17 Vue.js
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中对用户身份认证实现两种方法
2011/06/04 PHP
javascript 获取图片颜色
2009/04/05 Javascript
JavaScript遍历table表格中的某行某列并打印其值
2014/07/08 Javascript
了不起的node.js读书笔记之例程分析
2014/12/22 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
2017/02/03 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
2017/06/17 Javascript
webpack4 + react 搭建多页面应用示例
2018/08/03 Javascript
vue模仿网易云音乐的单页面应用
2019/04/24 Javascript
详解可以用在VS Code中的正则表达式小技巧
2019/05/14 Javascript
js 根据对象数组中的属性进行排序实现代码
2019/09/12 Javascript
Python实现的手机号归属地相关信息查询功能示例
2017/06/08 Python
python实现报表自动化详解
2017/11/16 Python
Python之Scrapy爬虫框架安装及使用详解
2017/11/16 Python
python抓取网页中链接的静态图片
2018/01/29 Python
python爬虫爬取快手视频多线程下载功能
2018/02/28 Python
对python中的xlsxwriter库简单分析
2018/05/04 Python
pytorch中如何使用DataLoader对数据集进行批处理的方法
2019/08/06 Python
解决matplotlib.pyplot在Jupyter notebook中不显示图像问题
2020/04/22 Python
Python中random模块常用方法的使用教程
2020/10/04 Python
python excel和yaml文件的读取封装
2021/01/12 Python
HTML5离线缓存Manifest是什么
2016/03/09 HTML / CSS
德国拖鞋网站:German Slippers
2019/11/08 全球购物
Vrbo英国:预订度假屋
2020/08/19 全球购物
Perfume’s Club澳大利亚官网:西班牙领先的在线美容店
2021/02/01 全球购物
家长给幼儿园的表扬信
2014/01/09 职场文书
九月份红领巾广播稿
2014/01/22 职场文书
运动会稿件300字
2014/02/14 职场文书
人事专员的职责
2014/02/26 职场文书
写求职信要注意什么问题
2014/04/12 职场文书
2014年超市员工工作总结
2014/11/18 职场文书
文明单位汇报材料
2014/12/24 职场文书
给上级领导的感谢信
2015/01/22 职场文书
海洋天堂观后感
2015/06/05 职场文书
会议室使用管理制度
2015/08/06 职场文书
党风廉政建设心得体会(2016最新版)
2016/01/22 职场文书
高效笔记技巧分享:学会这些让你不再困扰
2019/09/04 职场文书