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 遮罩层实现(mask)实现代码
Jan 09 Javascript
jQuery阻止冒泡和HTML默认操作
Nov 17 Javascript
jquery库文件略庞大用纯js替换jquery的方法
Aug 12 Javascript
基于javascript实现全屏漂浮广告
Mar 31 Javascript
Bootstrap Img 图片样式(推荐)
Dec 13 Javascript
jQuery源码分析之init的详细介绍
Feb 13 Javascript
Cookies 和 Session的详解及区别
Apr 21 Javascript
慕课网题目之js实现抽奖系统功能
Sep 19 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
Sep 10 Javascript
vue-resource:jsonp请求百度搜索的接口示例
Nov 09 Javascript
JavaScript实现单点登录的示例
Sep 23 Javascript
vue基于Teleport实现Modal组件
May 31 Vue.js
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
You might like
php的header和asp中的redirect比较
2006/10/09 PHP
Zend Studio for Eclipse的java.lang.NullPointerException错误的解决方法
2008/12/06 PHP
PHP 多进程 解决难题
2009/06/22 PHP
PHP提示Notice: Undefined variable的解决办法
2012/11/24 PHP
PHP文件上传类实例详解
2016/04/08 PHP
yii2.0实现创建简单widgets示例
2016/07/18 PHP
Laravel 自定命令以及生成文件的例子
2019/10/23 PHP
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
2009/12/03 Javascript
浅析return false的正确使用
2013/11/04 Javascript
js控制容器隐藏出现防止样式变化的两种方法
2014/04/25 Javascript
一个Action如何调用两个不同的方法
2014/05/22 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
2015/03/03 Javascript
JQuery解析XML的方法小结
2016/04/02 Javascript
AngularJS 避繁就简的路由
2016/07/01 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
2016/11/07 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
2017/02/16 Javascript
Nodejs实现文件上传的示例代码
2017/09/26 NodeJs
JavaScript 日期时间选择器一些小结
2018/04/02 Javascript
js form表单input框限制20个字符,10个汉字代码实例
2019/04/12 Javascript
layui 数据表格复选框实现单选功能的例子
2019/09/19 Javascript
vue keep-alive 动态删除组件缓存的例子
2019/11/04 Javascript
vue计算属性无法监听到数组内部变化的解决方案
2019/11/06 Javascript
[01:06:42]VP vs NewBee Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
python为tornado添加recaptcha验证码功能
2014/02/26 Python
用Python抢过年的火车票附源码
2015/12/07 Python
用Python写一个无界面的2048小游戏
2016/05/24 Python
使用python绘制二元函数图像的实例
2019/02/12 Python
python虚拟环境完美部署教程
2019/08/06 Python
Python 静态方法和类方法实例分析
2019/11/21 Python
50岁生日感言
2014/01/23 职场文书
会计系毕业生求职信
2014/05/28 职场文书
临床医学专业求职信
2014/08/08 职场文书
美国旅游签证工作证明
2014/10/14 职场文书
学生逃课万能检讨书2000字
2015/02/17 职场文书
班主任寄语2015
2015/02/26 职场文书
党小组意见范文
2015/06/08 职场文书