jquery計(jì)算出left和top,讓一個(gè)div水平垂直居中的簡(jiǎn)單實(shí)例
實(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è)參考,也希望大家多多支持腳本之家。
- 淺談jQuery頁面的滾動(dòng)位置scrollTop、scrollLeft
- jQuery中scrollLeft()方法用法實(shí)例
- jQuery 位置函數(shù)offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
- jquery計(jì)算鼠標(biāo)和指定元素之間距離的方法
- 用Jquery選擇器計(jì)算table中的某一列某一行的合計(jì)
- 一個(gè)簡(jiǎn)單的jQuery計(jì)算器實(shí)現(xiàn)了連續(xù)計(jì)算功能
- jQuery實(shí)現(xiàn)購物車多物品數(shù)量的加減+總價(jià)計(jì)算
- jQuery 計(jì)算iframe 窗口大小的方法
- jQuery計(jì)算textarea中文字?jǐn)?shù)(剩余個(gè)數(shù))的小程序
- 基于jQuery的計(jì)算文本框字?jǐn)?shù)的代碼
- jQuery居中元素scrollleft計(jì)算方法示例
相關(guān)文章
jQuery plugin animsition使用小結(jié)
本文通過實(shí)例代碼給大家分享了jQuery plugin animsition用法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧2017-09-09jQuery 獲取、設(shè)置HTML或TEXT內(nèi)容的兩種方法
這篇文章主要介紹了jQuery 獲取、設(shè)置HTML或TEXT內(nèi)容的兩種方法,需要的朋友可以參考下2014-05-05jQuery中:first-child選擇器用法實(shí)例
這篇文章主要介紹了jQuery中:first-child選擇器用法,實(shí)例分析了:first-child選擇器的功能、定義及匹配父元素的第一個(gè)子元素的用法技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12CSS+jQuery實(shí)現(xiàn)的一個(gè)放大縮小動(dòng)畫效果
因?yàn)樾枨缶椭挥?個(gè)元素。如果是要用CSS的class來處理,那就需要用到CSS3動(dòng)畫了,好了下面為大家介紹下如何實(shí)現(xiàn)這個(gè)放大縮小動(dòng)畫效果2013-09-09jQuery實(shí)現(xiàn)文本框郵箱輸入自動(dòng)補(bǔ)全效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)文本框郵箱輸入自動(dòng)補(bǔ)全效果,大家無需輸入完全部郵箱信息,感興趣的小伙伴們可以參考一下2015-11-11jQuery如何獲取同一個(gè)類標(biāo)簽的所有值(默認(rèn)無法獲取)
jQuery總是只返回第一個(gè)類標(biāo)簽的值,所以無法達(dá)到我們的要求,那么jQuery如何獲取同一個(gè)類標(biāo)簽的所有的值,下面與大家分享方法2014-09-09詳解JavaScript中jQuery和Ajax以及JSONP的聯(lián)合使用
這篇文章主要介紹了詳解JavaScript中jQuery和Ajax以及JSONP的聯(lián)合使用,jQuery庫和Ajax異步結(jié)構(gòu)以及JSON數(shù)據(jù)傳輸也是JS日常編程中最常用到的東西,需要的朋友可以參考下2015-08-08