快捷導(dǎo)航

jQery使網(wǎng)頁(yè)在顯示器上居中顯示適用于任何分辨率

更新時(shí)間：2014年06月09日 09:31:24 作者：

這篇文章主要介紹了jQery使網(wǎng)頁(yè)在任何分辨率的顯示器上居中顯示的方法,需要的朋友可以參考下

檢測(cè)屏幕寬度，并設(shè)置為id為frame的div寬度，根據(jù)自己網(wǎng)頁(yè)的最大寬度來(lái)調(diào)節(jié)，小demo最大寬度為1440

 
<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>無(wú)標(biāo)題文檔</title> 
<script src="js/jquery.min.js" type="text/javascript"></script> 
<script> 
function onWidthChange(){ 
var w=$(window).width(); 
x=(w-1440)/2; 
$("#frame").css("width",w); 
if(w<1024){ 
$("#frame").css("overflow","visible"); 
$("#webContent").css("margin-left",x); 
}else if(1024<w<1440){ 
$("#frame").css("overflow","hidden"); 
$("#webContent").css("margin-left",x); 
} 
setTimeout(onWidthChange,0); 
}; 
</script> 
</head> 
<body> 
<div id="frame" style="overflow:hidden;"> 
<div id="webContent"> 
//內(nèi)容 
</div> 
</div> 
</body> 
</html> 

相關(guān)文章

jQuery EasyUI API 中文文檔 - Spinner微調(diào)器使用
jQuery EasyUI API 中文文檔 - Spinner微調(diào)器使用，需要的朋友可以參考下。
2011-10-10
jQuery獲取頁(yè)面及個(gè)元素高度、寬度的總結(jié)——超實(shí)用
這篇文章主要介紹了jQuery獲取頁(yè)面及個(gè)元素高度、寬度的總結(jié)——超實(shí)用,需要的朋友可以參考下
2015-07-07
JQuery與JS里submit()的區(qū)別示例介紹
這篇文章主要介紹了JQuery與JS里submit()的區(qū)別,需要的朋友可以參考下
2014-02-02
jquery實(shí)現(xiàn)的一個(gè)簡(jiǎn)單進(jìn)度條效果實(shí)例
這篇文章主要介紹了jquery實(shí)現(xiàn)的一個(gè)簡(jiǎn)單進(jìn)度條效果實(shí)例,很好的一個(gè)入門實(shí)例,從一個(gè)方面介紹了進(jìn)度的實(shí)現(xiàn)原理,需要的朋友可以參考下
2014-05-05
如何實(shí)現(xiàn)星星評(píng)價(jià)（jquery.raty.js插件）
本文主要分享了用jQuery插件jquery.raty.js實(shí)現(xiàn)星星評(píng)價(jià)功能：后臺(tái)傳數(shù)據(jù)，前臺(tái)顯示星星個(gè)數(shù)的具體方法。有很好的參考價(jià)值，需要的朋友一起來(lái)看下吧
2016-12-12
解決IE7中使用jQuery動(dòng)態(tài)操作name問(wèn)題
IE7中無(wú)法使用Jquery動(dòng)態(tài)操作頁(yè)面元素的name屬性，怎么解決這個(gè)問(wèn)題呢？下面小編給大家?guī)?lái)了解決IE7中使用jQuery動(dòng)態(tài)操作name問(wèn)題，需要的朋友參考下吧
2017-08-08
解析JSON對(duì)象與字符串之間的相互轉(zhuǎn)換
本篇文章主要是對(duì)JSON對(duì)象與字符串之間的相互轉(zhuǎn)換進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2013-12-12
jquery實(shí)現(xiàn)簡(jiǎn)單的自動(dòng)播放幻燈片效果
這篇文章主要介紹了jquery實(shí)現(xiàn)簡(jiǎn)單的自動(dòng)播放幻燈片效果,較為詳細(xì)的介紹了html頁(yè)面布局、css樣式設(shè)置及jQuery控制自動(dòng)播放幻燈的相關(guān)技巧,需要的朋友可以參考下
2015-06-06
基于JQUERY的兩個(gè)ListBox子項(xiàng)互相調(diào)整的實(shí)現(xiàn)代碼
基于JQUERY的兩個(gè)ListBox子項(xiàng)互相調(diào)整的實(shí)現(xiàn)代碼，需要的朋友可以參考下。
2011-05-05
一些有用的JavaScript和jQuery的片段分享
通過(guò)添加 CSS 類改變?cè)氐耐庥^和感覺(jué)，非常干凈的方法，而不是添加內(nèi)聯(lián)樣式。
2011-08-08