jquery改变浏览器大小窗口变大怎么变小？

来源：蜘蛛抓取(WebSpider) 时间：2017-09-27 02:52 标签： js改变浏览器窗口大小
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
赞助商广告
相关内容推荐浏览器窗口大小变化时css的变化 - CSS - web - ITeye论坛
浏览器窗口大小变化时css的变化
& 上一页 1
锁定老帖子
精华帖 (0) :: 良好帖 (1) :: 新手帖 (0) :: 隐藏帖 (0)
等级: 初级会员
来自: 北京
发表时间：&&
最后修改：
相关知识库：
最近做一个项目，发现了点问题，贴出来分析分析
做一个页面，页面布局需要根据屏幕大小的变化而变化。代码大致如下
http-equiv="Content-Type"
content="text/
charset=gb2312"&
&meta http-equiv="expires" content="0"&
&title&页面自适应&/title&
&style type="text/css"&
#main{min-width:940width:100%;height:505border:1}
#left{width:200height:500border:1float:}
#right{min-width:730width:100%;height:500border:1float:}
&div id="main"&
&div id="left"&&&/div&
&div id="right"&&&/div&
&script type="text/javascript"&
//document.getElementById("main").style.width = document.body.offsetW
document.getElementById("right").style.width = document.getElementById("main").offsetWidth - 206 + "px";
设定了最小宽度，保证在窗口大小变化时页面不至于严重变形。在div中设定width的百分比，是以body为参照的。但是设定height的百分比，它就不那么听话了，解决办法是同时在css中设定html和body的height。
为了在左边div宽度固定时右边div能根据屏幕大小变化而变化，用了js来控制，如上面代码所示。
但是当浏览器窗口变小时，右边的div就跑到下面了。估计就是id为main的div宽度不够所致，在火狐下用Firebug看也没发现什么。后来在js中加上
document.getElementById("main").style.width = document.body.offsetW
就一切正常了。
然后就开始想到底是怎么回事。js只会在页面刷新时运行，窗口大小变化时只有css起作用了。注掉添加的那句js，分别去掉main和right的min-width，在火狐下仍然看不出什么，在IE8下，去掉main的min-width发现main的宽度变小了，去掉right的min-width后right的宽度不发生变化。个人认为在窗口大小变化的时候，如果设定了min-width就会以变化之前的width和css中已设定min-width中较大者作为它的值。
以上纯属个人观点，不当之处还望口下留情并给予指正。
来自: 北京
发表时间：&&
没人鸟你啊
请登录后投票
等级: 初级会员
来自: 北京
发表时间：&&
s 写道没人鸟你啊
你鸟了……
请登录后投票
等级: 初级会员
来自: 哈哈
发表时间：&&
IE不支持min-width 噻～
请登录后投票
等级: 初级会员
来自: 北京
发表时间：&&
要在resize事件里写重置代码的，贴个我的window.onresize=function(){ // onresize will crash in IE6 if ($.browser.version != '6.0') {$("#main").height($(window).height()-65);}}
请登录后投票
等级: 初级会员
来自: 北京
发表时间：&&
hkongm 写道要在resize事件里写重置代码的，贴个我的
window.onresize=function(){
// onresize will crash in IE6
if ($.browser.version != '6.0') {$("#main").height($(window).height()-65);}
}
是的，有这个事件响应，问题就解决了。多谢指教
请登录后投票
ludatong110
来自: 上海
发表时间：&&
com0606 写道hkongm 写道要在resize事件里写重置代码的，贴个我的
window.onresize=function(){
// onresize will crash in IE6
if ($.browser.version != '6.0') {$("#main").height($(window).height()-65);}
}
是的，有这个事件响应，问题就解决了。多谢指教
能说下为什么要减去65？
请登录后投票
等级: 初级会员
来自: 广州
发表时间：&&
一个minmax.js就行啦，搞那么复杂。
请登录后投票
等级: 初级会员
来自: 北京
发表时间：&&
vimest 写道一个minmax.js就行啦，搞那么复杂。
恩恩，js学得不够扎实呀。
请登录后投票
等级: 初级会员
来自: 北京
发表时间：&&
resize都不用。。
请登录后投票
& 上一页 1
跳转论坛:移动开发技术
Web前端技术
Java企业应用
编程语言技术jQuery实现HTML元素随着浏览器窗口大小变化而动态变化
随着扁平化的流行，我们的网页往往变得更加简单和清晰，但虽然简单，在就在技术上和对开发者的要求上并没有变得简单，反而是变得更加搞的要求；因为整体简单了，就不能让其中有任何瑕疵，让一切都得看上去是精致的。而今天这个解决方案也是基于这样一种需求而来的，虽然标题上是用jQuery来做，实际上原生的JS也能做到；当然用JS的这个框架可能开发效率会更高一点，于是我们下面就以jQuery为例子吧。
那今天这个需求其实非常常见，那就是做一些宽屏全屏幻灯片首页首屏的时候，往往可能上面有一个导航条，而下面就是我们希望铺满全屏的幻灯片。这时候我们就不能够使用固定的尺寸了，因为不同的电脑终端屏幕的分辨率不同，就算是同一台电脑不同的浏览器有效窗口大小也不一样。
如果用CSS来做，你可能在其中遇到一些问题或者感觉似乎不是那么靠谱。而如果使用最基础的JS方式，比如获取窗口大小减去顶部区域的高度从而等到幻灯盒子及幻灯图片的高度，这样其实也会存在一个问题，那就是当用户开始的浏览器是缩放状态的时候，然后他没有刷新网页就让浏览器恢复到全部尺寸，这样我们的幻灯片的高度还是原来的那样，这种体验显然不够好。
因此我们需要的是能够像CSS控制尺寸一样动态地改变元素的大小，也就是我们标题中所说的实现HTML元素随着浏览器窗口大小变化而动态变化，有点儿类似CSS3的响应式。如果你对JS的事件比较熟悉，那可能就会想到resize()事件了。
resize()事件或者说方法是干嘛的，其实看字面上的意思我们就待该知道这是跟重定义（re）大小（size）相关的，官方给它的定义就是：当调整浏览器窗口的大小时，发生 resize 事件。 resize() 方法触发 resize 事件，或规定当发生 resize 事件时运行的函数。基本语法如下：
$(selector).resize(function)
//参数:function,可选;规定当发生 resize 事件时运行的函数。
于是我们可以编写如下jQuery代码：
$(function(){
var $wind = $(window); //加载窗口
var $indexBox = $('.index-banner .slideBox'); //加载幻灯片盒子
var $indexImg = $('.index-banner .bd img'); //加载幻灯片img元素
var winH= $wind.outerHeight();//窗口高度
var winW= $wind.outerWidth();//窗口宽度
var headerH= $('#header').outerHeight();//导航高度
var hdh=Math.abs(winH-headerH);
$indexBox.width(winW);
$indexBox.height(hdh);
$indexImg.height(hdh);
//resize事件处理
$wind.resize(function(){
var newW = $wind.outerWidth();
var newH = $wind.outerHeight();
var newHdh=Math.abs(newH-headerH);
$indexBox.width(newW);
$indexBox.height(newHdh);
$indexImg.height(newHdh);
以上的十多行代码就实现我们我所需要的需求，当然实际应用比上面的可能更为复杂，比如说除了导航高度需要减去外，还可能有一个最上面的管理工具栏（比如wordpress默认状态）等等，有了这个模型我们可以根据应用而举一反三即可。
转载请注明出处：jQuery实现HTML元素随着浏览器窗口大小变化而动态变化 - 木泉网
Powered by WordPress. 湘ICP备号-3
湘公网安备 01号

我要回帖

更多关于 js改变浏览器窗口大小 的文章

 

随机推荐