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之五(取DOM元素)
Jun 20 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
May 23 Javascript
基于jquery的多功能软键盘插件
Jul 25 Javascript
JS教程:window.location使用方法的区别介绍
Oct 04 Javascript
jquery-syntax动态语法着色示例代码
May 14 Javascript
js中split和replace的用法实例
Feb 28 Javascript
jQuery焦点图轮播效果实现方法
Dec 19 Javascript
微信小程序 页面跳转如何实现传值
Apr 05 Javascript
Angular 作用域scope的具体使用
Dec 11 Javascript
基于node简单实现RSA加解密的方法步骤
Mar 21 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
Jun 11 Javascript
vue中的v-model原理,与组件自定义v-model详解
Aug 04 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
php 无限分类的树类代码
2009/12/03 PHP
PHP两个n位的二进制整数相加问题的解决
2018/08/26 PHP
Aster vs Newbee BO3 第二场2.18
2021/03/10 DOTA
JavaScript中为元素加上name属性的方法
2011/05/09 Javascript
Javascript Request获取请求参数如何实现
2012/11/28 Javascript
Js判断CSS文件加载完毕的具体实现
2014/01/17 Javascript
减少访问DOM的次数提升javascript性能
2014/02/24 Javascript
jQuery实现精美的多级下拉菜单特效
2015/03/14 Javascript
javascript中new关键字详解
2015/12/14 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
2017/07/18 jQuery
详解tween.js的使用教程
2017/09/14 Javascript
Nodejs中的require函数的具体使用方法
2019/04/02 NodeJs
微信小程序实现一个简单swiper代码实例
2019/12/30 Javascript
vue使用原生swiper代码实例
2020/02/05 Javascript
Vite和Vue CLI的优劣
2021/01/30 Vue.js
jquery实现广告上下滚动效果
2021/03/04 jQuery
python发送邮件示例(支持中文邮件标题)
2014/02/16 Python
python开发之thread实现布朗运动的方法
2015/11/11 Python
Python+django实现简单的文件上传
2016/08/17 Python
Python 将pdf转成图片的方法
2018/04/23 Python
用Python一键搭建Http服务器的方法
2018/06/01 Python
浅谈python连续赋值可能引发的错误
2018/11/10 Python
对pandas中时间窗函数rolling的使用详解
2018/11/28 Python
python实现微信机器人: 登录微信、消息接收、自动回复功能
2019/04/29 Python
python json.dumps() json.dump()的区别详解
2020/07/14 Python
css3的动画特效之动画序列(animation)
2017/12/22 HTML / CSS
详解CSS3原生支持div铺满浏览器的方法
2018/08/30 HTML / CSS
英国男女奢华内衣和泳装购物网站:Figleaves
2017/01/28 全球购物
Nike英国官网:Nike.com (UK)
2017/02/13 全球购物
维珍澳洲航空官网:Virgin Australia
2017/09/08 全球购物
人事部专员岗位职责
2014/03/04 职场文书
2014年秋季新学期寄语
2014/08/02 职场文书
信息与工商管理职业规划范文:为梦想而搏击
2014/09/11 职场文书
承诺书范本
2015/01/21 职场文书
女性健康知识讲座通知
2015/04/23 职场文书
Python移位密码、仿射变换解密实例代码
2021/06/27 Python