jQery使網(wǎng)頁在顯示器上居中顯示適用于任何分辨率
更新時(shí)間：2014年06月09日 09:31:24 作者：
這篇文章主要介紹了jQery使網(wǎng)頁在任何分辨率的顯示器上居中顯示的方法,需要的朋友可以參考下
檢測屏幕寬度，并設(shè)置為id為frame的div寬度， 根據(jù)自己網(wǎng)頁的最大寬度來調(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>無標(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>
復(fù)制代碼 代碼如下:
<!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>無標(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實(shí)現(xiàn)輸入框?qū)崟r(shí)輸入觸發(fā)事件代碼
本文主要分享了jquery實(shí)現(xiàn)輸入框?qū)崟r(shí)輸入觸發(fā)事件的代碼，代碼簡單易懂，需要的朋友一起來看下吧2016-12-12
jQuery實(shí)現(xiàn)嵌套選項(xiàng)卡功能
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)嵌套選項(xiàng)卡功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
本文給大家介紹jquery側(cè)邊欄實(shí)現(xiàn)代碼，這些側(cè)邊欄菜單可以用在不同風(fēng)格的網(wǎng)頁上,如果你覺得不錯(cuò),可以參考下本文實(shí)現(xiàn)代碼2016-05-05
這篇文章主要為大家詳細(xì)介紹了jquery mobile移動端幻燈片滑動切換效果，實(shí)現(xiàn)滑動切換和點(diǎn)擊切換，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
JQuery實(shí)現(xiàn)動態(tài)表格點(diǎn)擊按鈕表格增加一行
動態(tài)表格,功能為點(diǎn)擊添加按鈕，表格增加一行并給其name屬性賦予的值，點(diǎn)擊刪除，自動刪除這一行，具體實(shí)現(xiàn)如下2014-08-08
基于jquery的滾動鼠標(biāo)放大縮小圖片效果，需要的朋友可以參考下。2011-10-10
在使用jquery操作js時(shí)，經(jīng)常整不明白this與$(this)。抽空仔細(xì)測試了一把，記錄下來以供在忘記的時(shí)候拉出來參考參考！2010-09-09
animate彈出后，調(diào)用out函數(shù)消失。2010-05-05
這篇文章主要介紹了jquery中object對象循環(huán)遍歷的方法，感興趣的小伙伴們可以參考一下2015-12-12
jQuery實(shí)現(xiàn)響應(yīng)鼠標(biāo)背景變化的動態(tài)菜單效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)響應(yīng)鼠標(biāo)背景變化的動態(tài)菜單效果代碼,涉及jquery鼠標(biāo)mouseover事件操作頁面元素屬性的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08