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