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 相关文章推荐
Ext对基本类型的扩展 ext,extjs,format
Dec 25 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
Oct 31 Javascript
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
Apr 08 Javascript
jQuery在header中设置请求信息的方法
Mar 06 Javascript
angular.JS实现网页禁用调试、复制和剪切
Mar 31 Javascript
Angular指令之restict匹配模式的详解
Jul 27 Javascript
React Native 环境搭建的教程
Aug 19 Javascript
JavaScript中import用法总结
Jan 20 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
Dec 10 Javascript
vue axios封装httpjs,接口公用配置拦截操作
Aug 11 Javascript
通过实例了解Render Props回调地狱解决方案
Nov 04 Javascript
jQuery实现移动端扭蛋机抽奖
Nov 08 jQuery
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
转生史莱姆:萌王第一次撸串开心到飞起,哥布塔撸串却神似界王神
2018/11/30 日漫
PHP 抓取新浪读书频道的小说并生成txt电子书的代码
2009/12/18 PHP
Thinkphp模板中使用自定义函数的方法
2012/09/23 PHP
php cli 小技巧
2013/06/03 PHP
php通过Chianz.com获取IP地址与地区的方法
2015/01/14 PHP
部署PHP时的4个配置修改说明
2015/10/19 PHP
php传值方式和ajax的验证功能
2017/03/27 PHP
window.location和document.location的区别分析
2008/12/23 Javascript
Javascript 事件流和事件绑定
2009/07/16 Javascript
javascript中的prototype属性实例分析说明
2010/08/09 Javascript
javascript 原型继承介绍
2011/08/30 Javascript
JS获取页面窗口大小的代码解读
2011/12/01 Javascript
javascript数组随机排序实例分析
2015/07/22 Javascript
readonly和disabled属性的区别
2015/07/26 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
2015/08/25 Javascript
javascript DIV实现跟随鼠标移动
2020/03/19 Javascript
less简单入门(CSS 预处理语言)
2017/03/08 Javascript
ES6新特性四:变量的解构赋值实例
2017/04/21 Javascript
JavaScript 中的 this 工作原理
2018/06/20 Javascript
[49:18]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 OG vs TNC
2018/04/01 DOTA
[38:39]KG vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python中类的属性和方法介绍
2018/11/27 Python
python+selenium 点击单选框-radio的实现方法
2019/09/03 Python
Python字符串大小写转换拼接删除空白
2019/09/19 Python
Django 404、500页面全局配置知识点详解
2020/03/10 Python
OpenCV实现机器人对物体进行移动跟随的方法实例
2020/11/09 Python
python的数学算法函数及公式用法
2020/11/18 Python
联想澳大利亚官网:Lenovo Australia
2018/01/18 全球购物
亚洲最大的眼镜批发商和零售商之一:Glasseslit
2018/10/08 全球购物
Ruby如何实现动态方法调用
2012/11/18 面试题
大学生村官工作感言
2014/01/10 职场文书
财务科长个人对照检查材料
2014/09/18 职场文书
2014年出纳工作总结与计划
2014/12/09 职场文书
妈妈别哭观后感
2015/06/08 职场文书
Windows下redis下载、redis安装及使用教程
2021/06/02 Redis
html中两种获取标签内的值的方法
2022/06/10 HTML / CSS