jQery使网页在显示器上居中显示适用于任何分辨率
这篇文章主要介绍了jQery使网页在任何分辨率的显示器上居中显示的方法,需要的朋友可以参考下
检测屏幕宽度,并设置为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>
jQery使网页在显示器上居中显示适用于任何分辨率的更多相关文章
- iOS在导航栏上居中显示分段控件(UISegmentedControl)
UISegmentedControl *segmentedControl = [[UISegmentedControl alloc] initWithItems:nil]; segmentedCont ...
- JQuery datatables 标题和内容居中显示
1.如题,使用到了强大的表格插件datatables,要使标题和内容都居中显示,只需要在jsp引入css,写上如下内容即可: /*qiulinhe:2016年11月7日13:48:26*/ /* da ...
- Js打开网页后居中显示
使用JavaScript定义打开网页后居中显示,并可为窗口设置大小,使用“window.open”方法打开新窗口:先来看完整的代码及调用方法: <html xmlns="http:// ...
- javascript DOM(2) 一个网页上切换显示不同的图片或文本
摘自: javascript DOM 编程艺术 1. 在一个网页上切换显示不同的图片 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...
- 【Hadoop故障处理】全分布下,DataNode进程正常启动,但是网页上不显示,并且DataNode节点为空
[故障背景] DataNode进程正常启动,但是网页上不显示,并且DataNode节点为空. /etc/hosts 的ip和hostname配置正常,各个机器之间能够ping通. [日志错误信息] ...
- 使提示框居中显示&自定义提示框
ToastActivity.java文件: 1 public class ToastActivity extends AppCompatActivity { 2 private Button mbtn ...
- 扩展Snackbar 使其支持居中显示
https://github.com/nispok/snackbar 默认Snackbar支持底部或者顶部显示,不支持居中显示 查看Snackbar.java的源码可以看到createMarginLa ...
- Wtl之奇技淫巧篇:一、SDI如何居中显示视图
Wtl的sdi应用,视图默认铺满框架的客户区.视图通常用modeless对话框,所有的界面元素都拥挤在左上角,这明显很丑陋.我们尝试让视图居中显示,保持原始大小,这是个很典型的问题,看似简单,诸多细节 ...
- 4.数码相框-freetype多行显示,居中显示
本章主要内容如下: 1)多行显示 2)居中显示 在上章3.数码相框-通过freetype库实现矢量显示里,我们使用矢量坐标时,该坐标仅仅在原点位置处,所以文字有可能会超出坐标,如下图所示: 既然超出了 ...
随机推荐
- adb shell root
因为开发需要,我经常会用到adb这个工具(Android Debug Bridge),我们都知道adb shell默认是没有root权限的,修改系统文件就很不方便了,adb push一个文件就提示Pe ...
- vscode Gitlens插件 查看代码提交
GitLens
- spring-boot 集成 swagger 问题的解决
spring-boot 集成 swagger 网上有许多关于 spring boot 集成 swagger 的教程.按照教程去做,发现无法打开接口界面. 项目由 spring mvc 迁移过来,是一个 ...
- STL源码剖析(heap)
STL heap并不是容器,而是一系列的算法. 这些算法接受RandomAccessIterator[start, end),并将其表述成一棵完全二叉树. 关于heap算法可以参考之前算法导论的一篇博 ...
- 让网页自动调用双核浏览器的极速模式(<meta name="renderer" content="webkit">)
背景:最近做了一个网站,传单服务器之后,每次打开都是乱码,不对啊,我在本地测得明明是排版很整齐啊,然后发现,360用的是“兼容模式”打开的,这就尴尬了,用户一打开就是乱码,这用户体验得有多差!用户可不 ...
- shared-service.ts
shared-service.ts import { Observable } from 'rxjs/Observable'; import { Injectable } from '@angular ...
- atitit..国富论 在现代it企业项目管理中的作用attialx 总结---国富论读后感 attialx
atitit..国富论 在现代it企业项目管理中的作用attialx 总结---国富论读后感 attialx 1. 国民财富的性质和原因的研究(简称:<国富论>) 1 2. 蕴含的重要管理 ...
- [svc]caffe安装笔记-显卡购买
caffe,这是是数据组需要做一些大数据模型的训练(深度学习), 要求 服务器+显卡(运算卡), 刚开始老板让买的牌子是泰坦的(这是2年前的事情了). 后来买不到这个牌子的,(jd,tb)看过丽台的, ...
- C++游戏系列5:不止有一件武器
很多其它见:C++游戏系列文件夹 知识点:对象数组作为数据成员 改进:每一个角色所持有的武器不仅仅一件,故持有的武器,用了对象数组来表示,当然,也能够是空手. 由此而带来的,还得记录一共同拥有几件武器 ...
- flink on yarn部分源码解析
转发请注明原创地址:https://www.cnblogs.com/dongxiao-yang/p/9403427.html flink任务的deploy形式有很多种选择,常见的有standalone ...