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 学习笔记(九)call和apply方法
Jan 11 Javascript
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
Feb 03 Javascript
基于jQuery的弹出框插件
Mar 18 Javascript
IE下window.onresize 多次调用与死循环bug处理方法介绍
Nov 12 Javascript
jquery简单图片切换显示效果实现方法
Jan 14 Javascript
JS访问SWF的函数用法实例
Jul 01 Javascript
jquery html动态添加的元素绑定事件详解
May 24 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
Mar 28 Javascript
详解JS构造函数中this和return
Sep 16 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
Sep 20 Javascript
JS使用对象的defineProperty进行变量监控操作示例
Feb 02 Javascript
layUI实现前端分页和后端分页
Jul 27 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
77A一级收信机修理记
2021/03/02 无线电
深入phpMyAdmin的安装与配置的详细步骤
2013/05/07 PHP
php中session定期自动清理的方法
2015/11/12 PHP
php封装的mysqli类完整实例
2016/10/18 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
基于CI(CodeIgniter)框架实现购物车功能的方法
2018/04/09 PHP
php命令行模式代码实例详解
2021/02/26 PHP
如何创建一个JavaScript弹出DIV窗口层的效果
2013/09/25 Javascript
AngularJS 使用 UI Router 实现表单向导
2016/01/29 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
2016/02/15 Javascript
JS封装的自动创建表格的实现代码
2016/06/15 Javascript
谈谈因Vue.js引发关于getter和setter的思考
2016/12/02 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
2017/02/20 Javascript
jQuery选择器_动力节点Java学院整理
2017/07/05 jQuery
create-react-app 修改为多入口编译的方法
2018/08/01 Javascript
详解vuex的简单todolist例子
2019/07/14 Javascript
vue+mock.js实现前后端分离
2019/07/24 Javascript
详解JavaScript 的执行机制
2020/09/18 Javascript
Python编程入门的一些基本知识
2015/05/13 Python
Python的自动化部署模块Fabric的安装及使用指南
2016/01/19 Python
通过Python爬虫代理IP快速增加博客阅读量
2016/12/14 Python
python django 实现验证码的功能实例代码
2017/05/18 Python
git进行版本控制心得详谈
2017/12/10 Python
python监控键盘输入实例代码
2018/02/09 Python
python的格式化输出(format,%)实例详解
2018/06/01 Python
一步步教你用python的scrapy编写一个爬虫
2019/04/17 Python
对PyQt5中的菜单栏和工具栏实例详解
2019/06/20 Python
python 实现一个反向单位矩阵示例
2019/11/29 Python
欧洲最大的美妆零售网站:Feelunique
2017/01/14 全球购物
欧舒丹加拿大官网:L’Occitane加拿大
2017/10/29 全球购物
致跳高运动员加油稿
2014/02/12 职场文书
前处理班长职位说明书
2014/03/01 职场文书
三好学生个人先进事迹材料
2014/05/17 职场文书
企业文化标语口号
2014/06/09 职场文书
音乐研修感悟
2015/11/18 职场文书
校园安全教育心得体会
2016/01/15 职场文书