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 ...
随机推荐
- Python 訪问Google+ (http)
CODE: #!/usr/bin/python # -*- coding: utf-8 -*- ''' Created on 2014-8-28 @author: guaguastd @name: l ...
- bazel-编译动态库
demo2_2 使用baze编译动态库 demo2_2目录树 ├── app │ ├── BUILD │ ├── func.cpp │ └── func.hpp ├── README.md └── W ...
- js 取父级 页面上的元素
var bb=window.opener.frames["contentIframe"].document.all["my:费用类别"][0].value; / ...
- ubuntu 14.04英文环境设置成中文
适用于ubuntu 14.04英文版的系统,其它版本的设置应该是大同小异的. 进入ubuntu系统,在顶部齿状标志找到system... 2.在personal找到Language Support 3 ...
- Ubuntu 12.04安装和设置SSH服务
OpenSSH 是 SSH (Secure SHell) 协议的免费开源实现.SSH协议族可以用来进行远程控制, 或在计算机之间传送文件.而实现此功能的传统方式,如telnet(终端仿真协议). rc ...
- HTML的级联Select
系统开发中,经常遇到级联Select的状况,而级联的Select Option数据一般记录于DB,如果每次都重新写一套级联Select,工作将是繁琐滴... 一般来说,写一套级联的Select的几个步 ...
- LeetCode: ZigZag Conversion 解题报告
ZigZag ConversionThe string "PAYPALISHIRING" is written in a zigzag pattern on a given num ...
- js photoswipe 相册使用 移动pc端均可
http://photoswipe.com/ 官网 这里使用的是最新 4.1.1版本 http://photoswipe.com/documentation/getting-started.html ...
- mysql 开启慢查询记录
Linux查看mysql 安装路径 一.查看文件安装路径 由于软件安装的地方不止一个地方,所有先说查看文件安装的所有路径(地址). 这里以mysql为例.比如说我安装了mysql,但是不知道文件都安装 ...
- anki插件推荐
记忆是一件需要反复重复的事情,可是怎么花最小的代价来重复呢? 著名的艾宾浩斯遗忘曲线是一个统计学的概念,非常具有参考价值,但是对于不同的人来说,是有差别的,另外操作起来也比较麻烦. 好在现在有许多记忆 ...