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 相关文章推荐
EasySlider 基于jQuery功能强大简单易用的滑动门插件
Jun 11 Javascript
JavaScript定义变量和变量优先级问题探讨
Oct 11 Javascript
原生的html元素选择器类似jquery选择器
Oct 15 Javascript
Bootstrap安装环境配置教程分享
May 27 Javascript
jQuery Ajax使用FormData对象上传文件的方法
Sep 07 Javascript
学习vue.js中class与style绑定
Dec 03 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
Dec 14 Javascript
React组件中的this的具体使用
Feb 28 Javascript
Node.js进阶之核心模块https入门
May 23 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
Sep 23 Javascript
js实现右键弹出自定义菜单
Sep 08 Javascript
webpack4从0搭建组件库的实现
Nov 29 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
新浪新闻小偷
2006/10/09 PHP
PHP中的替代语法简介
2014/08/22 PHP
php使用PDO操作MySQL数据库实例
2014/12/30 PHP
Laravel中如何增加自定义全局函数详解
2017/05/09 PHP
php生成word并下载代码实例
2019/03/15 PHP
20款超赞的jQuery插件 Web开发人员必备
2011/02/26 Javascript
基于jquery的获取浏览器窗口大小的代码
2011/03/28 Javascript
用js实现控件的隐藏及style.visibility的使用
2013/06/14 Javascript
html页面显示年月日时分秒和星期几的两种方式
2013/08/20 Javascript
Js获取下拉框选定项的值和文本的实现代码
2014/02/26 Javascript
javascript实现简单的二级联动
2015/03/19 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
2015/10/14 Javascript
基于JavaScript操作DOM常用的API小结
2015/12/01 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
2016/05/25 Javascript
AngularJs实现分页功能不带省略号的代码
2016/05/30 Javascript
HTML5 实现的一个俄罗斯方块实例代码
2016/09/19 Javascript
js实现可旋转的立方体模型
2016/10/16 Javascript
vue中本地静态图片路径写法
2018/03/06 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
2018/12/14 Javascript
vue强制刷新组件的方法示例
2019/02/28 Javascript
Vue实现随机验证码功能
2020/12/29 Vue.js
Python imread、newaxis用法详解
2019/11/04 Python
python科学计算之narray对象用法
2019/11/25 Python
Visual Studio code 配置Python开发环境
2020/09/11 Python
python 生成正态分布数据,并绘图和解析
2020/12/21 Python
台湾乐天市场:日本No.1的网路购物网站
2017/03/22 全球购物
伦敦一家领先的精品零售商:IRIS Fashion
2019/05/24 全球购物
季度思想汇报
2014/01/01 职场文书
大学毕业感言一句话
2014/02/06 职场文书
公司拓展活动方案
2014/02/13 职场文书
促销活动总结报告
2014/04/26 职场文书
泰山导游词
2015/02/02 职场文书
部门经理迟到检讨书
2015/02/16 职场文书
2015年学校消防安全工作总结
2015/10/14 职场文书
2016优秀班主任个人先进事迹材料
2016/02/26 职场文书
不同品牌、不同型号对讲机如何互相通联
2022/02/18 无线电