编程 Javascript

jQery使网页在显示器上居中显示适用于任何分辨率

Posted in Javascript onJune 09, 2014

检测屏幕宽度，并设置为id为frame的div宽度，根据自己网页的最大宽度来调节，小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>

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery+CSS 实现的超Sexy下拉菜单

Jan 17 Javascript

js模拟滚动条(横向竖向)

Feb 22 Javascript

jquery阻止冒泡事件使用模拟事件

Sep 06 Javascript

调用innerHTML之后onclick失效问题的解决方法

Jan 28 Javascript

javascript检测浏览器的缩放状态实现代码

Sep 28 Javascript

js实现简洁的TAB滑动门效果代码

Sep 06 Javascript

全面解析JavaScript中“&&”和“||”操作符(总结篇)

Jul 18 Javascript

angularjs实现下拉列表的选中事件示例

Mar 03 Javascript

js canvas实现适用于移动端的百分比仪表盘dashboard

Jul 18 Javascript

cdn模式下vue的基本用法详解

Oct 07 Javascript

使用 vue 实例更好的监听事件及vue实例的方法

Apr 22 Javascript

JavaScript HTML DOM元素节点操作汇总

Jul 29 Javascript

javascript的动态加载、缓存、更新以及复用（一）

Jun 09 #Javascript

JavaScript利用正则表达式去除日期中的-

Jun 09 #Javascript

使用Node.js实现一个简单的FastCGI服务器实例

Jun 09 #Javascript

初识SmartJS - AOP三剑客

Jun 08 #Javascript

javascript实例分享---具有立体效果的图片特效

Jun 08 #Javascript

js 中将多个逗号替换为一个逗号的代码

Jun 07 #Javascript

js 去除字符串第一位逗号的方法

Jun 07 #Javascript