浅谈弹性页面布局

    今天在博客园看了冰极峰先生的《弹性流体布局》文章,他具体的讲解了弹性布局是用到min-width这个属性,但这个属性在IE6下不受支持,因此加入了老外的一个JS脚本,这个脚本让IE6也能支持最小,最大宽度(高度)四个属性.弹性布局其实最难的还不是布局,而是里面的图片如何做到自适应,也就是说让图片也变得弹性起来。这是这种布局时要最优先考虑的事情。页头图片就是一个弹性图片的典型应用,你可以缩小一下窗口看看。

      其中minmax.js的代码如下:

// minmax.js: make IE5+/Win support CSS min/max-width/height
// version 1.0, 08-Aug-2003
// written by Andrew Clover <and@doxdesk.com>, use freely

/*@cc_on
@if (@_win32 && @_jscript_version>4)

var minmax_elements;

minmax_props= new Array(
  new Array('min-width', 'minWidth'),
  new Array('max-width', 'maxWidth'),
  new Array('min-height','minHeight'),
  new Array('max-height','maxHeight')
);

// Binding. Called on all new elements. If <body>, initialise; check all
// elements for minmax properties

function minmax_bind(el) {
  var i, em, ms;
  var st= el.style, cs= el.currentStyle;

  if (minmax_elements==window.undefined) {
    // initialise when body element has turned up, but only on IE
    if (!document.body || !document.body.currentStyle) return;
    minmax_elements= new Array();
    window.attachEvent('onresize', minmax_delayout);
    // make font size listener
    em= document.createElement('div');
    em.setAttribute('id', 'minmax_em');
    em.style.position= 'absolute'; em.style.visibility= 'hidden';
    em.style.fontSize= 'xx-large'; em.style.height= '5em';
    em.style.top='-5em'; em.style.left= '0';
    if (em.style.setExpression) {
      em.style.setExpression('width', 'minmax_checkFont()');
      document.body.insertBefore(em, document.body.firstChild);
    }
  }

  // transform hyphenated properties the browser has not caught to camelCase
  for (i= minmax_props.length; i-->0;)
    if (cs[minmax_props[i][0]])
      st[minmax_props[i][1]]= cs[minmax_props[i][0]];
  // add element with properties to list, store optimal size values
  for (i= minmax_props.length; i-->0;) {
    ms= cs[minmax_props[i][1]];
    if (ms && ms!='auto' && ms!='none' && ms!='0' && ms!='') {
      st.minmaxWidth= cs.width; st.minmaxHeight= cs.height;
      minmax_elements[minmax_elements.length]= el;
      // will need a layout later
      minmax_delayout();
      break;
  } }
}

// check for font size changes

var minmax_fontsize= 0;
function minmax_checkFont() {
  var fs= document.getElementById('minmax_em').offsetHeight;
  if (minmax_fontsize!=fs && minmax_fontsize!=0)
    minmax_delayout();
  minmax_fontsize= fs;
  return '5em';
}

// Layout. Called after window and font size-change. Go through elements we
// picked out earlier and set their size to the minimum, maximum and optimum,
// choosing whichever is appropriate

// Request re-layout at next available moment
var minmax_delaying= false;
function minmax_delayout() {
  if (minmax_delaying) return;
  minmax_delaying= true;
  window.setTimeout(minmax_layout, 0);
}

function minmax_stopdelaying() {
  minmax_delaying= false;
}

function minmax_layout() {
  window.setTimeout(minmax_stopdelaying, 100);
  var i, el, st, cs, optimal, inrange;
  for (i= minmax_elements.length; i-->0;) {
    el= minmax_elements[i]; st= el.style; cs= el.currentStyle;

    // horizontal size bounding
    st.width= st.minmaxWidth; optimal= el.offsetWidth;
    inrange= true;
    if (inrange && cs.minWidth && cs.minWidth!='0' && cs.minWidth!='auto' && cs.minWidth!='') {
      st.width= cs.minWidth;
      inrange= (el.offsetWidth<optimal);
    }
    if (inrange && cs.maxWidth && cs.maxWidth!='none' && cs.maxWidth!='auto' && cs.maxWidth!='') {
      st.width= cs.maxWidth;
      inrange= (el.offsetWidth>optimal);
    }
    if (inrange) st.width= st.minmaxWidth;

    // vertical size bounding
    st.height= st.minmaxHeight; optimal= el.offsetHeight;
    inrange= true;
    if (inrange && cs.minHeight && cs.minHeight!='0' && cs.minHeight!='auto' && cs.minHeight!='') {
      st.height= cs.minHeight;
      inrange= (el.offsetHeight<optimal);
    }
    if (inrange && cs.maxHeight && cs.maxHeight!='none' && cs.maxHeight!='auto' && cs.maxHeight!='') {
      st.height= cs.maxHeight;
      inrange= (el.offsetHeight>optimal);
    }
    if (inrange) st.height= st.minmaxHeight;
  }
}

// Scanning. Check document every so often until it has finished loading. Do
// nothing until <body> arrives, then call main init. Pass any new elements
// found on each scan to be bound  

var minmax_SCANDELAY= 500;

function minmax_scan() {
  var el;
  for (var i= 0; i<document.all.length; i++) {
    el= document.all[i];
    if (!el.minmax_bound) {
      el.minmax_bound= true;
      minmax_bind(el);
  } }
}

var minmax_scanner;
function minmax_stop() {
  window.clearInterval(minmax_scanner);
  minmax_scan();
}

minmax_scan();
minmax_scanner= window.setInterval(minmax_scan, minmax_SCANDELAY);
window.attachEvent('onload', minmax_stop);

@end @*/

转载于:https://www.cnblogs.com/xj0112/archive/2009/05/10/1453749.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/496349.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Spring Data JPA 从入门到精通~Criteria概念的简单介绍

&#xff08;1&#xff09;Root<T> root 代表了可以查询和操作的实体对象的根&#xff0c;如果将实体对象比喻成表名&#xff0c;那 root 里面就是这张表里面的字段&#xff0c;这不过是 JPQL 的实体字段而已。通过里面的 Path<Y> get(String attributeName)&…

微信php实例代码_php微信公众平台示例代码分析(二)

一、摘要微信公众平台提供了一个简单的php示例代码&#xff0c;在做进一步开发之前&#xff0c;我们有必要将其详细了解一下。二、获取代码三、分析代码完整代码如下&#xff1a;/*** wechat php test*///define your tokendefine("TOKEN", "weixin");$wec…

Linux异步之信号(signal)机制分析

From&#xff1a;http://www.cnblogs.com/hoys/archive/2012/08/19/2646377.html From&#xff1a;http://kenby.iteye.com/blog/1173862 Linux下的信号详解及捕捉信号&#xff1a;http://www.jb51.net/article/90695.htm linux信号详解&#xff1a;http://blog.csdn.net/f…

DeepMind集成AI智能体架构「MERLIN」:基于目标导向智能体中的无监督预测记忆

来源&#xff1a;arXiv摘要&#xff1a;在自然界中&#xff0c;动物往往会执行目标导向的行为&#xff0c;尽管它们的传感器的范围有限。作者&#xff1a;Greg Wayne、 Chia-Chun Hung、David Amos、Mehdi Mirza、Arun Ahuja、Agnieszka Grabska-Barwinska、Jack Rae、Piotr Mi…

Spring Data JPA 从入门到精通~JpaSpecificationExecutor示例

新建两个实体 Entity(name "UserInfoEntity") Table(name "user_info", schema "test") public class UserInfoEntity implements Serializable {IdColumn(name "id", nullable false)private Integer id;Column(name "f…

手机反编译java源码,Android反编译(一)之反编译JAVA源码

Android反编译(一)之反编译JAVA源码[目录]1、工具2、反编译步骤步骤1&#xff1a;把apk文件后缀名改为.zip步骤2&#xff1a;解压zip包得到classes.dex步骤3&#xff1a;将Dex反编译为Jar包(工具&#xff1a;dex2jar)命令: CMD>dex2jar.bat classes.dex步骤4&#xff1a;用j…

一文详解计算机视觉的广泛应用:网络压缩、视觉问答、可视化、风格迁移等

作者 | 张皓&#xff08;南京大学&#xff09;来源&#xff1a;人工智能头条丨公众号引言深度学习目前已成为发展最快、最令人兴奋的机器学习领域之一&#xff0c;许多卓有建树的论文已经发表&#xff0c;而且已有很多高质量的开源深度学习框架可供使用。然而&#xff0c;论文通…

[转]暴牛!全国女生录用老公统一考试试卷

全国女生录老公统一考试试卷①本试卷为全国女生招录老公统一考试试卷&#xff0c;各省(自治区、直辖市&#xff0c;计划单列市&#xff0c;不含港、澳、台地区)均须使用此卷&#xff0c;不得自行命题。②由于法律未规定同性婚姻合法&#xff0c;故报名参加考试者均须为男性。若…

Linux-进程、进程组、作业、会话、控制终端详解

From&#xff1a;http://www.cnblogs.com/JohnABC/p/4079669.html Linux进程优先级的处理--Linux进程的管理与调度(二十二)&#xff1a;http://blog.csdn.net/gatieme/article/details/51719208 进程 、进程组、会话、控制终端之间的关系&#xff1a;http://blog.csdn.net/y…

Spring Data JPA 从入门到精通~Specification工作中的一些扩展

Specification 工作中的一些扩展 我们在实际工作中会发现&#xff0c;如果上面的逻辑&#xff0c;简单重复写总感觉是不是可以抽出一些公用方法呢&#xff0c;此时引入一种工厂模式&#xff0c;帮我们做一些事情&#xff0c;可以让代码更加优雅。基于 JpaSpecificationExecuto…

用php编写xml,PHP 读取和编写 XML

什么是 XML&#xff1f;XML 是一种数据存储格式。它没有定义保存什么数据&#xff0c;也没有定义数据的格式。XML 只是定义了标记和这些标记的属性。格式良好的 XML 标记看起来像这样&#xff1a;代码如下:Jack HerringtonDOM读取 XML代码如下:$doc new DOMDocument();$doc-&g…

浅谈项目开发现状(一)

在现在的软件开发中&#xff0c;一些大的软件公司有充分的资金&#xff0c;所以他的公司人员组织架构能组成&#xff1a;需求分析团队&#xff08;为了更好的了解用户的完整需求&#xff09;--->研发团队&#xff08;通过计算机语言来实现用户需求&#xff09;&#xff0c;方…

波士顿咨询:2018最具创新力企业50强

来源&#xff1a;前瞻网在波士顿咨询公司评选的2018年最具创新力公司中&#xff0c;有11家公司——其中包括前10名中的7家——都是“数字原住民”&#xff0c;按定义也就是“数字创新者”。榜单上大多数公司已经将数字技术建立在他们的创新计划中。这一趋势在各个行业都很普遍&…

java 防止sql xxs注入,Java-JSP网站 防SQL注入,防XSS等攻击有什么好的处理办法?...

jsp 来防SQL注入&#xff0c;防XSS等攻击的话&#xff0c;首先要选择PreparedStatement来处理sql语句&#xff01;同时java后台还需要对页面中接受到的参数进行字符替换&#xff01;/*** 清除所有XSS攻击的字符串* 学来的&#xff01;分享&#xff01;*/public static String g…

Linux 线程

Linux 的多线程编程的高效开发经验&#xff1a;https://www.ibm.com/developerworks/cn/linux/l-cn-mthreadps/ linux线程的实现&#xff1a;http://www.cnblogs.com/zhaoyl/p/3620204.html 线程概念经典解析&#xff1a;http://blog.chinaunix.net/uid-29613952-id-421477…

Spring Data JPA 从入门到精通~JpaSpecificationExecutor实现原理

JpaSpecificationExecutor 实现原理 我们还是先通过开发工具&#xff0c;把关键的类添加到Diagram上面进行分析&#xff0c;如图&#xff1a; 我们通过上图可以看一下&#xff0c;前面介绍的几个类之间的关联关系。 SimpleJpaRepository 实现类中的关键源码如下&#xff1a; …

XML文档处理(树的应用)

1&#xff0e;问题陈述设计一个关于XML文档存取的类库&#xff0c;按树的方式处理XML文档&#xff0c;实现对树形文档进行一些基本操作的功能。2&#xff0e;基本要求内部要求&#xff1a;XML文档可一次全部读入内存后处理。至少设置文档类、XML元素类等。提供基本的树结构访问…

微信发布首份《移动支付时代的无人零售报告》

来源&#xff1a;爱范儿 作者&#xff1a;Panda3 月 30 日&#xff0c;微信支付行业运营总监白振杰在 2018 智慧无人零售大会上发布了《移动支付时代的无人零售行业报告》&#xff0c;报告首次结合中国百货商业协会权威调研和微信支付的数据分析能力&#xff0c;揭示了移动支…

mousemove事件java,three.js,补间相机和mousemove事件

我正在尝试使用three.js我正在使用补间移动相机&#xff0c;它工作得很好 . 但是&#xff0c;在动画结束时&#xff0c;相机会跳回到初始位置 .我发现mousemove事件导致了这种行为 . 我如何解决这个问题并保持补间动作和鼠标移动&#xff1f;我根据this example构建了我的three…

Spring Data JPA 从入门到精通~EntityManager介绍

EntityManager 介绍 我们前面已经无数次提到了&#xff0c;JPA 的默认 Repository 的实现类是 SimpleJpaRepository&#xff0c;而里面的具体实现就是调用的 EntityManager。对于 javax.persistence.EntityManager 通过源码&#xff0c;先来看下它主要给我们提供了哪几个方法&…