编程 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实现的在新窗口打开链接的方法小结

Apr 22 Javascript

ajax上传时参数提交不更新等相关问题

Dec 11 Javascript

创建、调用JavaScript对象的方法集锦

Dec 24 Javascript

jQuery实现ichat在线客服插件

Dec 29 Javascript

JavaScript模块规范之AMD规范和CMD规范

Oct 27 Javascript

jQuery实现的背景颜色渐变动画效果示例

Mar 24 jQuery

Javascript中JSON数据分组优化实践及JS操作JSON总结

Dec 22 Javascript

解决LayUI表单获取不到data的问题

Aug 20 Javascript

js单线程的本质 Event Loop解析

Oct 29 Javascript

jQuery操作元素追加内容示例

Jan 10 jQuery

微信小程序仿通讯录功能

Apr 09 Javascript

微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)

Apr 11 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