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 相关文章推荐
Javascript 圆角div的实现代码
Oct 15 Javascript
利用jQuery 实现GridView异步排序、分页的代码
Feb 06 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
Sep 02 Javascript
js中settimeout方法加参数的使用实例
Feb 27 Javascript
在JavaScript中处理字符串之link()方法的使用
Jun 08 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
Aug 06 Javascript
浅谈js中function的参数默认值
Feb 20 Javascript
使用JavaScriptCore实现OC和JS交互详解
Mar 28 Javascript
使用Vue组件实现一个简单弹窗效果
Apr 23 Javascript
基于bootstrap页面渲染的问题解决方法
Aug 09 Javascript
通过vue刷新左侧菜单栏操作
Aug 06 Javascript
vue-simple-uploader上传成功之后的response获取代码
Sep 07 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
You might like
Email+URL的判断和自动转换函数
2006/10/09 PHP
新闻分类录入、显示系统
2006/10/09 PHP
详解PHP内置访问资源的超时时间 time_out file_get_contents read_file
2013/06/03 PHP
laravel创建类似ThinPHP中functions.php的全局函数
2016/11/26 PHP
PHP数据对象映射模式实例分析
2019/03/29 PHP
jQuery移除tr无效的解决方法(tr是动态添加)
2014/09/22 Javascript
jQuery使用之处理页面元素用法实例
2015/01/19 Javascript
jquery实现select选择框内容左右移动代码分享
2015/11/21 Javascript
微信小程序 引用其他js文件实现代码
2017/02/22 Javascript
使用jQuery,Angular实现登录界面验证码详解
2017/04/27 jQuery
详解Vue中一种简易路由传参办法
2017/09/15 Javascript
记React connect的几种写法(小结)
2018/09/18 Javascript
JointJS流程图的绘制方法
2018/12/03 Javascript
js实现星星打分效果
2020/07/05 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
2020/11/12 Javascript
详解JavaScript中分解数字的三种方法
2021/01/05 Javascript
[00:37]DOTA2上海特级锦标赛 Secert 战队宣传片
2016/03/03 DOTA
python中二维阵列的变换实例
2014/10/09 Python
深入讨论Python函数的参数的默认值所引发的问题的原因
2015/03/30 Python
Python中的条件判断语句基础学习教程
2016/02/07 Python
Python实现遍历目录的方法【测试可用】
2017/03/22 Python
Numpy中stack(),hstack(),vstack()函数用法介绍及实例
2018/01/09 Python
python+os根据文件名自动生成文本
2019/03/21 Python
详解HTML5.2版本带来的修改
2020/05/06 HTML / CSS
墨尔本照明批发商店:Mica Lighting
2017/12/28 全球购物
加拿大廉价机票预订网站:CheapOair.ca
2018/03/04 全球购物
美国精油公司:Plant Therapy
2019/05/17 全球购物
介绍一下except的用法和作用
2015/01/22 面试题
应聘自荐书
2013/10/08 职场文书
路政管理求职信
2014/06/18 职场文书
酒店管理专业毕业生自我鉴定
2014/09/29 职场文书
工作汇报开头与结尾怎么写
2014/11/08 职场文书
学籍证明模板
2014/11/21 职场文书
党课主持词大全
2015/06/30 职场文书
单位车辆管理制度
2015/08/05 职场文书
Mysql中mvcc各场景理解应用
2022/08/05 MySQL