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 复杂的嵌套环境中输出单引号和双引号
May 26 Javascript
js中onload与onunload的使用示例
Aug 25 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
Sep 02 Javascript
jquery中$.post()方法的简单实例
Feb 04 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
Oct 19 Javascript
JS获取一个未知DIV高度的方法
Aug 09 Javascript
bootstrap下拉菜单使用方法解析
Jan 13 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
Dec 03 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
JS如何把字符串转换成json
Feb 21 Javascript
js判断密码强度的方法
Mar 18 Javascript
vue实现Toast组件轻提示
Apr 10 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中XMLHttpRequest(Ajax)不能设置自定义的Referer的解决方法
2011/11/26 PHP
ThinkPHP中公共函数路径和配置项路径的映射分析
2014/11/22 PHP
php实现的验证码文件类实例
2015/06/18 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
jQuery使用手册之三 CSS操作
2007/03/24 Javascript
基于jquery的可多选的下拉列表框
2012/07/20 Javascript
JS 跳转页面延迟2种方法
2013/03/29 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
2016/01/14 Javascript
理解Javascript图片预加载
2016/02/23 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
2016/10/17 Javascript
将json转换成struts参数的方法
2016/11/08 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
2016/12/14 Javascript
关于在mongoose中填充外键的方法详解
2017/08/14 Javascript
Node.js使用Angular简单示例
2018/05/11 Javascript
nodeJS服务器的创建和重新启动的实现方法
2018/05/12 NodeJs
taro小程序添加骨架屏的实现代码
2019/11/15 Javascript
python的类变量和成员变量用法实例教程
2014/08/25 Python
Python实现简单的代理服务器
2015/07/25 Python
python 获取当天凌晨零点的时间戳方法
2018/05/22 Python
python实现图片文件批量重命名
2020/03/23 Python
Django框架封装外部函数示例
2019/05/28 Python
python 爬取学信网登录页面的例子
2019/08/13 Python
基于python连接oracle导并出数据文件
2020/04/28 Python
经济实惠的豪华家具:My-Furniture
2019/03/12 全球购物
美国专业汽车音响和移动电子产品零售商:Car Toys
2019/05/13 全球购物
大学生自荐信
2013/12/11 职场文书
英语自我评价范文
2014/01/24 职场文书
《雷雨》教学反思
2014/02/20 职场文书
最新大学生创业计划书写作攻略
2014/04/02 职场文书
常务副总经理任命书
2014/06/05 职场文书
社区三八妇女节活动总结
2015/02/06 职场文书
2015年度班主任自我评价
2015/03/11 职场文书
2015年生产车间工作总结
2015/04/22 职场文书
python绘图subplots函数使用模板的示例代码
2021/04/30 Python
MySQL时间盲注的五种延时方法实现
2021/05/18 MySQL
使用RedisTemplat实现简单的分布式锁
2021/11/20 Redis