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 ...
随机推荐
- TP关联模型
<?php class ExpertiseModel extends RelationModel { protected $_link=array( 'Role'=> array( 'ma ...
- Servlet与WebService关系
转自:http://www.cnblogs.com/cy163/archive/2008/04/16/1155767.html 其实从实现的效果上,它们是很相似的 相同点: 客 ...
- 写个关于使用cocostudio Armature实现动画自由切换的小demo
这是一个关于使用cocostudio实现动画自由切换的小demo auto sprite =Sprite::create("background.png"); sprite-> ...
- 使用vuex保存singer每个歌星的基本信息
1.建src/store文件夹,建立以下文件来存储歌星信息 2.state.js const state = { singer:{} } export default state 2.mutation ...
- Activiti进行时——企业工作流生命周期贯通 (zhuan)
http://www.jianshu.com/p/e6971e8a8dad ********************************************** 图1:一个典型的审批工作流程 ...
- grails3.1.5 com.mysql.jdbc.Driver
[报错] Caused by: java.lang.ClassNotFoundException: com.mysql.jdbc.Driver at java.net.URLClassLoader$1 ...
- sql添加自动增长列
alter table a add num int identity
- HTML5 Canvas 梦幻的文字飞扬动画教程
之前为大家介绍了一款HTML5/CSS3 3D文字特效 文字外翻效果.今天为大家带来的是html5 canvas实现的文字漂动动画效果.画面非常梦幻. 在线预览 源码下载 实现代码如下: html ...
- CenOS6.5下源码安装vim-7.4
1.[下载] vim-7.4下载地址: ftp://ftp.vim.org/pub/vim/unix/vim-7.4.tar.bz2 2.[解压] tar jxvf vim-7.4.tar.bz2 之 ...
- pip安装的python扩展模块自定义目录
根据系统不同: Windows是python目录下Lib\site-packages\: Linux是/usr/local/lib/python/dist-packages/.