jquery计算出left和top,让一个div水平垂直居中的简单实例
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水平垂直居中的简单实例的更多相关文章
- css进阶 04-如何让一个元素水平垂直居中?
04-如何让一个元素水平垂直居中? #前言 老板的手机收到一个红包,为什么红包没居中? 如何让一个子元素在父容器里水平垂直居中?这个问题必考,在实战开发中,也应用得非常多. 你也许能顺手写出好几种实现 ...
- 用css让一个容器水平垂直居中
阅读目录 方法一:position加margin 方法二: diaplay:table-cell 方法三:position加 transform 方法四:flex;align-items: cente ...
- 如何用css让一个容器水平垂直居中
方法一: 以前设置里面的绿div总是会使用{position:absolute;left:50%;top:50%;margin-left:-div宽度的一半;margin-top:-div高度的一半} ...
- 公司的一个面试题:如何用css让一个容器水平垂直居中?
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 七种css方式让一个容器水平垂直居中
阅读目录 方法一:position加margin 方法二: diaplay:table-cell 方法三:position加 transform 方法四:flex;align-items: cente ...
- 如何让一个DIV水平,垂直方向都居中于浏览器?
<style type="text/css"><!-- div {position:absolute;top:50%;left:50%;margin:-150px ...
- 如何让一个div水平和垂直居中对齐
以下方法来自百度知道:https://zhidao.baidu.com/question/558984366971173044.html 方法1: .parent { width: 800px; he ...
- DIV在另一个DIV里面垂直居中,水平居中
HTML: <div class="parent"> <div class="children"> <div class=&quo ...
- 关于页面布局中,如何让一个div水平和垂直居中的五个方案
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- [k8s]kube-router替代kube-proxy实现svc网络和pod网络
本文讲解了kube-router部署,无需在部署kube-proxy了. kube-router采用lvs实现svc网络,采用bgp实现pod网络. kube-router也是基于cni网络,本文是容 ...
- 翻翻git之---效果鲜明的类ViewPager库 ConvenientBanner(对图片载入部分进行改动)
转载请注明出处:王亟亟的大牛之路 昨天写了篇基础的View绘制的内容貌似观众老爷们不怎么喜欢.那再这里再安利下自己定义View时.用到Paint Canvas的一些温故.讲讲用路径绘画实现动画效果(基 ...
- php获取某年某月的天数
function days_in_month($month, $year) { // calculate number of days in a month return $month == 2 ? ...
- "高级"数据库小结
刚刚考完高级数据库,这里有多高级等后面考完组合数学和算法再细聊.试卷在往年基础上改进了部分题目(貌似有人知道新题目的来源,如查询优化树),也可能是两份试卷交叉年份考.总之会的还是会,没看过的当然不会只 ...
- Cocos2d-x和时间有关的代码
用cocos2d-x获取系统时间,格式为年月日时分秒: void GetTime(float dt) { struct tm *tm; #if (CC_TARGET_PLATFORM == CC_PL ...
- . net 源代码调试
对于 .net framework 中的代码,光拿 Reflector 看是不够过瘾的,如果能够调试进去就好了! 其实,微软是提供了一套 sourcecode 的下载的: http://referen ...
- LeetCode 新题: Find Minimum in Rotated Sorted Array II 解题报告-二分法模板解法
Find Minimum in Rotated Sorted Array II Follow up for "Find Minimum in Rotated Sorted Array&quo ...
- 基于jquery的可拖动div
昨天给大家介绍了一款基于jquery ui漂亮的可拖动div实例,今天要给大家分享一款基于jquery的可拖动div.这款可拖动div只要引用jquery就可以,无需引用jquery ui.还实时记录 ...
- Java面向对象编程:封装,继承,多态
Java面向对象的三大特征: 封装:通过Java的类来实现数据和操作方法的封装,对外界可以将每一个Java类都视为一个黑箱,只需调用该黑箱提供的方法即可完成你想要的操作. 继承:通过类的继承,将统一的 ...
- [4G]Linux平台上实现4G通信
转自:http://blog.sina.com.cn/s/blog_7880d3350102wb92.html 在ARM平台上实现4G模块的PPP拨号上网,参考网上的资料和自己的理解,从一无所知到开发 ...