`

JS 实现DIV随浏览器窗口大小变化

 
阅读更多

以下是宽度变化的示例，高度也可参考：

01 <script type= "text/javascript" >
02    function initWidth() {
03          var bodyWidth = document.compatMode == "BackCompat" ?document.body.clientWidth:document.documentElement.clientWidth;
04          document.getElementById( "Content" ).style.width = bodyWidth - 180;
05      }
06      initWidth();
07      if (document.attachEvent) {
08          window.attachEvent( 'onresize' , initWidth);
09      } else {
10          window.addEventListener( 'resize' , initWidth, false );
11      }
12 </script>
分享到：
| DIV+CSS常用属性定义说明
评论
1 楼 开发小菜 2014-02-19  
什么意思，没明白？能不能写一个例子
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    GenJS v2.0 很棒的Div弹出窗口JS类.rar

    GenJS是一个Div弹出窗口JS类，简称Gen，兼容当前主流浏览器(Firefox1.5 /IE6 )，完全基于纯Html/CSS JS技术。 　主要封装Web常用JS操作：加入收藏夹、设为主页、刷新、复制、Cookie操作、弹出窗口、下来列表、获取...

    jQuery 弹出层 浮动遮罩层 提示框 并随页面滚动而滚动

    实现弹出层不再难，只要引用jQuery.UI.Impromptu.js这个js文件后,想要弹出哪个tag都行了 如：我想要&lt;div id="ok"&gt;这里是弹出浮动遮罩层&lt;/div&gt; 并随页面滚动而滚动 只要调用 $('#ok').showModel();这个方法就可以了...

    JS获取鼠标位置距浏览器窗口距离的方法示例

    本文实例讲述了JS获取鼠标位置距浏览器窗口距离的方法。分享给大家供大家参考，具体如下： 先来看看运行效果图： 代码如下： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=utf-8&gt; &lt;...

    Javascript中浏览器窗口的基本操作总结

    窗口位置 【1】获取 　浏览器(firefox不支持)提供了screenLeft和screenTop属性，分别用于表示窗口相对于屏幕左边和上边的位置 　在窗口最大化的情况下...//移动窗口，会有数值的变化 &lt;div id='myDiv'&gt;&lt;/div&gt; [removed]

    可拖动、可关闭、透明标题的DIV弹出窗口，完美兼容各个浏览器

    纯JS制作的可拖动、带关闭按钮、带透明标题栏的DIV弹出窗口，完美兼容IE,FF,chrome等浏览器，测试通过，里面的样式大家可以自己DIY

    div模块层随页面滚动遇顶固定的两种方法(js&jQuery)

    当浮动层div与浏览器窗口上边缘接触的一瞬间，其页面垂直偏移值与页面的滚动高度是一致的，所以我们就用这个进行判断。那如何获得页面上元素距离页面的垂直距离呢？ 这里则是使用javaScript库实现。

    浮动的div自适应居中显示的js代码

    当div是浮动的时候浏览器窗口发生变化的时候不能居中显示（因为浮动的时候一般设定的有left或者right值） 可以先用jquery获取外围的div随浏览器变化而变化的宽度（加上监听事件） 之后再获取div的宽度 例如： 代码...

    JS+DIV 可拖拽,弹出窗口

    JS写的可以拖拽的窗口.很好用.效果不错.上传上来供大家使用.

    div+css百分比表格+DIV+CSS+JS静态分页程序+DIV+CSS像素表格

    百分比表格(用DIV+CSS)以百分比显示，可以根据窗口的大小自动调节所显示的大小！ DIV+CSS+JS静态分页程序可兼容主流浏览器（IE、FF、Opera） DIV+CSS表格（用DIV+CSS做的表格像素表格） 内容不多但是绝对实用，其实...

    javascript浏览器窗口之间传递数据的方法

    本文实例讲述了javascript浏览器窗口之间传递数据的方法。分享给大家供大家参考。具体分析如下： 摘要： 在项目开发中我们经常会遇到弹窗，有的是通过div模拟弹窗效果，有的是通过iframe，也有通过window自带的open...

    div或img图片高度随宽度自适应的方法

    利用js来实现有一个缺点就是只能在页面刷新的时候才能调整图片的高度，不能随着浏览器的窗口大小变化来实现自适应。 二、我这次主要是用css来实现图片高度的自适应问题。 下面是所需要的代码 （这种方法是可以在图片...

    div+iframe弹出窗口：可最大化、最小化，可拖拽，带遮罩功能

    div+iframe做出的弹出窗口，效果等同于模态窗口。弹出窗口可最大化、最小化，可拖拽。带遮罩功能。 解决替换模态窗口，避免模态调模态出现的一系列问题：session丢失，提交返回，调父类方法层级多了或者多页面调的...

    跨浏览器弹出窗口[js]

    跨浏览器的弹出窗口[带遮罩层]，您值得拥有

    窗口和表单事件.pptx

    当调整浏览器窗口大小时，发生 resize 事件。 x=0; $(document).ready(function(){ $(window).resize(function(){ $("span").text(x+=1); }); $("button").click(function(){ $(window).resize(); });}); 窗口...

    使用jQuery监听DOM元素大小变化

    起因 今天写页面的时候突然有...平常，都是在整个浏览器窗口变化时触发一个修改布局的回调函数。使用的是window对象的resize事件，利用： [removed] = callback; 来绑定。但根据resize事件的target是defaultView (w

    如何创建一个JavaScript弹出DIV窗口层的效果

    在本教程中，我将用最通俗的语言和最简洁的代码给大家演示如何创建一个JavaScript弹出DIV窗口层的效果。 创建一个弹出DIV窗口可能是现在网站/网页制作中最常碰到的问题之一。传统的JavaScript弹窗已经不适合目前网站...

    js实现悬浮可拖动登录窗口(demo)

    dropDiv2.0是我在拖拽div例子的基础上改进的例子。相对于拖拽例子，这里增添了event浏览器兼容性处理、禁鼠标选中的一些机制。

    JS弹出居中的DIV的代码

    首先再次详细解释一下JS中窗口和网页的几种尺寸属性的含义 document.body.clientWidth（网页可见区域宽）：是指浏览器显示网页的区域宽度，不包括浏览器的边框宽度和垂直滚动条的宽度。大小随着浏览器的窗口大小而...

    jquery.fullBleed:jQuery插件，可缩放图像以占据整个浏览器窗口

    jquery.fullBleed 缩放图像以占据整个浏览器窗口。用法 $ ( 'img' ) . fullBleed ( ) ;渐进增强对于现代浏览器，img元素将转换为带有背景图像的div，因此它们可以利用CSS3的“ background-size：cover”属性。 这...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    1.jquery+div随屏幕滚动特效(支持设置参数滚动) 2.jQuery字符插件之适合留言板的jquery文本框输入字符限制插件下载 3.jquery实现Tooltip提示(文字、链接、地图锚点),自带5种不同样式 4.jQuery实现支付宝隐藏...

Magicbox
Global site tag (gtag.js) - Google Analytics