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代码小结
Aug 01 Javascript
jQuery中:animated选择器用法实例
Dec 29 Javascript
Node.js返回JSONP详解
May 18 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
Jul 14 Javascript
Jil,高效的json序列化和反序列化库
Feb 15 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
Apr 05 Javascript
Three.js基础学习之场景对象
Sep 27 Javascript
在Vue中使用echarts的方法
Feb 05 Javascript
详解Vue.js中.native修饰符
Apr 24 Javascript
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
Vue的H5页面唤起支付宝支付功能
Apr 18 Javascript
vue实现轮播图帧率播放
Jan 26 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的宝库目录--PEAR
2006/10/09 PHP
PHP5下$_SERVER变量不再受magic_quotes_gpc保护的弥补方法
2012/10/31 PHP
php简单中奖算法(实例)
2017/08/15 PHP
js 模拟实现类似c#下的hashtable的简单功能代码
2010/01/24 Javascript
JS扩展方法实例分析
2015/04/15 Javascript
浅谈javascript中return语句
2015/07/15 Javascript
javascript省市区三级联动下拉框菜单实例演示
2015/11/29 Javascript
javascript中JSON.parse()与eval()解析json的区别
2016/05/19 Javascript
jquery mobile移动端幻灯片滑动切换效果
2020/04/15 Javascript
Bootstarp基本模版学习教程
2017/02/01 Javascript
基于ajax和jsonp的原生封装(实例)
2017/10/16 Javascript
原生JS实现多个小球碰撞反弹效果示例
2018/01/31 Javascript
vue实现树形菜单效果
2018/03/19 Javascript
在Mac下彻底卸载node和npm的方法
2018/05/16 Javascript
微信小程序保存图片到相册权限设置
2020/04/09 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
2020/12/04 Vue.js
python二叉树的实现实例
2013/11/21 Python
儿童编程python入门
2018/05/08 Python
Python matplotlib画图与中文设置操作实例分析
2019/04/23 Python
Opencv实现抠图背景图替换功能
2019/05/21 Python
Python中的list与tuple集合区别解析
2019/10/12 Python
python科学计算之scipy——optimize用法
2019/11/25 Python
pandas数据拼接的实现示例
2020/04/16 Python
Jupyter打开图形界面并画出正弦函数图像实例
2020/04/24 Python
基于Python的一个自动录入表格的小程序
2020/08/05 Python
基于Python爬取51cto博客页面信息过程解析
2020/08/25 Python
python 爬虫基本使用——统计杭电oj题目正确率并排序
2020/10/26 Python
Python爬取豆瓣数据实现过程解析
2020/10/27 Python
关于赌博的检讨书
2014/01/24 职场文书
《临死前的严监生》教学反思
2014/02/13 职场文书
课堂教学改革实施方案
2014/03/17 职场文书
安全生产专项整治方案
2014/05/06 职场文书
小学教师暑期培训方案
2014/08/28 职场文书
2014年房产销售工作总结
2014/12/08 职场文书
教师工作态度自我评价
2015/03/05 职场文书
Python 实现绘制子图及子图刻度的变换等问题
2021/05/31 Python