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>

赞 (0)

相关推荐

  • 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/

  • js实现在网页上简单显示时间的方法

    本文实例讲述了js实现在网页上简单显示时间的方法.分享给大家供大家参考.具体如下: 这是一款网页时钟JS代码,纯javascript实现,显示时.分.秒.网页时间显示.网页时钟有很多,这个真的挺简易的,美工好的朋友可在此基础上进一步美化完善 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tr

  • jQuery插件实现控制网页元素动态居中显示

    本文实例讲述了jQuery插件实现控制网页元素动态居中显示的方法.分享给大家供大家参考.具体实现方法如下: (function($) { $.fn._center = function(self, parent, dimension) { if(!dimension.vertical && !dimension.horizontal) return; //won't do anything anyway if(parent) parent = self.parent(); else par

  • JavaScript和CSS通过expression实现Table居中显示

    JavaScript和CSS通过expression实现Table居中显示

    上篇博客说的是将div设置为居中显示,今天来分享一下如何将表格居中的显示.至于居中的原理就不说了,可以看一下我的上篇博客,这次没有使用window的两个事件,而是使用一个叫expression的函数.现在多数的浏览器都支持这个函数.在写上一篇博客的时候,我脑里想能不能把计算后的值赋给css的left和top属性呢?后来查阅资料找到了这个函数.这个函数用来把CSS属性和JavaScript表达式关联起来,这里的CSS属性可以是元素固有的属性,也可以是自定义的属性.就是说CSS属性后面可以是一段Ja

  • Java Swing实现让窗体居中显示的方法示例

    Java Swing实现让窗体居中显示的方法示例

    本文实例讲述了Java Swing实现让窗体居中显示的方法.分享给大家供大家参考,具体如下: Swing组件是AWT组建的增强组件,是功能强大的"轻量级组件".这里来简单介绍一下Swing实现窗体居中显示的方法. 其他不多说,直接上代码! package awtDemo; import java.awt.Toolkit; import javax.swing.JFrame; @SuppressWarnings("serial") public class AppWi

  • Java窗体居中显示的2种方法(实例讲解)

    第1种方法: //setSize(300, 200); pack(); // 得到显示器屏幕的宽.高 int width = Toolkit.getDefaultToolkit().getScreenSize().width; int height = Toolkit.getDefaultToolkit().getScreenSize().height; // 得到窗体的宽.高 int windowsWidth = this.getWidth(); int windowsHeight = thi

  • 批处理实现文本内容居中显示的代码

    a.txt 代码: [Promise don't come easy] I should have known all along. There was something wrong. I just never read between the lines. Then I woke up one day and found you on your way. Leaving nothing but my heart behind. What can I do to make it up to y

  • Android自定义TextView实现文字图片居中显示的方法

    Android自定义TextView实现文字图片居中显示的方法

    最近有个需求是这样的,人民币的符号"¥"因为安卓手机系统的不一致导致符号不是完全一样,所以用美工的给的图片代替,考虑到用的地方比较多,所以想着写一个继承于线性布局的组合控件,后来一想,安卓中不是有TextView吗,这个自带图片的控件,后来写了个demo,因为我是用的MatchParent,导致问题出现,人民币符号不是和文字一样的居中,因此才有了这篇博文,让我们来自定义TextView吧,这个场景用的比较多. 分析下TextView的源码 我们先来分析下TextView的源码,因为Te

  • python tkinter界面居中显示的方法

    由于tkinter没有直接提供居中显示的api,因此,要想将tk的对话框居中显示,需要用到tk自带的设定位置的方法geometry() nScreenWid, nScreenHei = tkLogin.maxsize() nCurWid = tkLogin.winfo_reqwidth() nCurHeight = tkLogin.winfo_reqheight() tkLogin.geometry("{}x{}+{}+{}".format(nCurWid, nCurHeight, n

  • iOS实现scrollview上拉显示Navbar下拉隐藏功能详解

    iOS实现scrollview上拉显示Navbar下拉隐藏功能详解

    本文主要介绍的是关于iOS中scrollview上拉显示Navbar下拉隐藏的相关内容,分享出来供大家参考学习,下面来看看详细的介绍: 动画效果: 关于下拉隐藏Nabbar,上拉显示,有三种方式:推崇第一种,但是做的还是没简书.知乎那样流畅,第一种是对navbar做了平移,第二种,第三种都是隐藏.. 方法如下: 第一种,和第二种处理时机一样,但是效果更好,并没有处理Navbar 的隐藏. -(void)scrollViewWillBeginDragging:(UIScrollView *)scr

随机推荐