jquery计算出left和top,让一个div水平垂直居中的简单实例_jquery

实例如下:

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水平垂直居中的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery
, div
, top
left
div float left 居中、div left top、jquery div left top、float left 居中、drawableleft居中,以便于您获取更多的相关知识。

时间: 2024-09-14 23:45:45

jquery计算出left和top,让一个div水平垂直居中的简单实例_jquery的相关文章

jQuery实用小技巧_输入框文字获取和失去焦点的简单实例_jquery

jQuery实用小技巧_输入框文字获取和失去焦点的简单实例 <input id="txt" class="text1" type="text" /> <script src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(function () { $("inp

jquery div模态窗口的简单实例_javascript技巧

jquery div模态窗口的简单实例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>

jquery实现div水平垂直居中例子

jquery统计出来  代码如下 复制代码 if($("#cont1").css("position")!="fixed"){ $("#cont1").css("position","absolute"); var dw = $(window).width(); var ow = $("#cont1").outerWidth(); var dh = $(window)

自定义一个异常类模板的简单实例_java

一:自定义异常类: package 自定义异常; //或者继承RuntimeException(运行时异常) public class MyException extends Exception { private static final long serialVersionUID = 1L; // 提供无参数的构造方法 public MyException() { } // 提供一个有参数的构造方法 public MyException(String message) { super(mes

Java实现一个小说采集程序的简单实例_java

被标题吸引进来的不要骂我. 只是一个简单的实现,随手写了来下载一部喜欢的小说的.示例中的小说只是示例,不是我的菜. 使用了jsoup.挺好用的一个工具. 有需要的话,参考下自己改吧.挺简单的,是吧. 代码如下: package com.zhyea.doggie; import java.io.File; import java.io.FileWriter; import java.io.IOException; import org.jsoup.Jsoup; import org.jsoup.n

用PHP写的一个冒泡排序法的函数简单实例_php实例

前几天遇到的一道关于算法的考题,要求用PHP语言实现对一个数组进行排序,我写了一个采用冒泡排序法的函数,和大家分享一下. <? //冒泡排序法 function bubble_sort($array) { $count = count($array); if($count <= 0) { return false; } for($i=0; $i<$count; $i++) { for($k=$count-1; $k>$i; $k--) { if($array[$k] < $a

用PHP写的一个冒泡排序法的函数简单实例

前几天遇到的一道关于算法的考题,要求用PHP语言实现对一个数组进行排序,我写了一个采用冒泡排序法的函数,和大家分享一下. <? //冒泡排序法 function bubble_sort($array) { $count = count($array); if($count <= 0) { return false; } for($i=0; $i<$count; $i++) { for($k=$count-1; $k>$i; $k--) { if($array[$k] < $a

Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例_jquery

如下所示: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head>    <title>Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例</title>    <meta http-equiv=

jQuery让DIV水平垂直居中的代码

通过css创建一个水平居中和垂直居中的div是一件比较麻烦的事情,您必须事先知道另外一个div的尺寸:  代码如下 复制代码 .className{  width:300px;  height:200px;  position:absolute;  left:50%;  top:50%;  margin:-100px 0 0 -150px; } 通过jQuery实现水平居中和垂直居中前面已经提到过了,css的方法只适用于有固定尺寸的div,所以到jQuery发挥作用了  代码如下 复制代码 jQ