jquery計算出left和top,讓一個div水平垂直居中的簡單實例

更新時間：2016年07月13日 11:12:51 投稿：jingxian

下面小編就為大家?guī)硪黄猨query計算出left和top,讓一個div水平垂直居中的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

實例如下：

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水平垂直居中的簡單實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

jQuery獲取多種input值的簡單實現(xiàn)方法
下面小編就為大家?guī)硪黄猨Query獲取多種input值的簡單實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06
jQuery實現(xiàn)固定在網(wǎng)頁頂部的菜單效果代碼
這篇文章主要介紹了jQuery實現(xiàn)固定在網(wǎng)頁頂部的菜單效果,通過jquery頁面scroll事件及邊距計算實現(xiàn)網(wǎng)頁的菜單固定效果,非常簡單實用,需要的朋友可以參考下
2015-09-09
JQuery EasyUI的使用
jQuery EasyUI 是一個基于 jQuery 的框架，集成了各種用戶界面插件。接下來通過本文給大家介紹JQuery EasyUI的使用，對jquery easyui相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧
2016-02-02
jQuery中extend函數(shù)詳解
這篇文章主要介紹了jQuery中extend函數(shù)詳解的相關(guān)資料,需要的朋友可以參考下
2015-07-07
jquery彈窗時禁止body滾動條滾動的例子
今天小編就為大家分享一篇jquery彈窗時禁止body滾動條滾動的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
javascript向后臺傳送相同屬性的參數(shù)即數(shù)組參數(shù)
在傳送參數(shù)時，經(jīng)常會碰到向后臺傳送一些相同屬性的參數(shù)，最好的選擇是采用數(shù)組的方式，下面有個不錯的示例，大家可以參考下
2014-02-02
基于jQuery實現(xiàn)在線選座之高鐵版
除了購買電影票在線選座，我們還接觸過飛機機艙選座，隨著科技的發(fā)展，之后火車、汽車都會支持在線選座，下面給大家分享基于jQuery實現(xiàn)在線選座之高鐵版，需要的朋友可以參考下
2015-08-08
基于JQuery的動態(tài)刪除Table表格的行和列的代碼
基于JQuery的動態(tài)刪除Table表格的行和列的代碼以前腳本之家也發(fā)布過相關(guān)的代碼，大家可以參考下。
2011-05-05
jQuery-1.9.1源碼分析系列（十一）DOM操作續(xù)之克隆節(jié)點
這篇文章主要介紹了jQuery-1.9.1源碼分析系列（十一）DOM操作續(xù)之克隆節(jié)點的相關(guān)資料,需要的朋友可以參考下
2015-12-12
自定義jQuery選項卡插件實例
自定義jQuery選項卡插件實例，需要的朋友可以參考一下
2013-03-03