快捷導(dǎo)航

jquery計(jì)算出left和top,讓一個(gè)div水平垂直居中的簡(jiǎn)單實(shí)例

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

下面小編就為大家?guī)?lái)一篇jquery計(jì)算出left和top,讓一個(gè)div水平垂直居中的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

實(shí)例如下：

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計(jì)算出left和top,讓一個(gè)div水平垂直居中的簡(jiǎn)單實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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