0
调整大小这里是一个jsfiddle你可以看到下面的代码在行动。调整窗口大小的框与jquery
当触发window resize
事件时,我尝试使用jquery调整选定框的大小。
但它只是第一个框与受影响的'selected'类。为什么是这样?
我该如何让其他箱子做同样的班级工作?
的Html
<ul class="selection">
<li class="selected">selected 1</li>
<li>2</li>
<li class="selected">selected 3</li>
<li class="selected">selected 4</li>
<li>5</li>
<li class="selected">selected 6</li>
</ul>
JQuery的
$(window).resize(function(){
$(".selected").each(function() {
//Define ratio & minimum dimensions
var minwidth = .5*(1024);
var minheight = .5*(600);
var ratio = 600/1024;
//Gather browser and current size
var imagewidth = $(this).width();
var imageheight = $(this).height();
var browserwidth = $(window).width();
var browserheight = $(window).height();
//Check for minimum dimensions
if ((browserheight < minheight) && (browserwidth < minwidth)){
$(this).height(minheight);
$(this).width(minwidth);
}
else
{
//When browser is taller
if (browserheight > browserwidth){
imageheight = browserheight;
$(this).height(browserheight);
imagewidth = browserheight/ratio;
$(this).width(imagewidth);
if (browserwidth > imagewidth){
imagewidth = browserwidth;
$(this).width(browserwidth);
imageheight = browserwidth * ratio;
$(this).height(imageheight);
}
}
//When browser is wider
if (browserwidth >= browserheight){
imagewidth = browserwidth;
$(this).width(browserwidth);
imageheight = browserwidth * ratio;
$(this).height(imageheight);
if (browserheight > imageheight){
imageheight = browserheight;
$(this).height(browserheight);
imagewidth = browserheight/ratio;
$(this).width(imagewidth);
}
}
}
return false;
});
});
明白了。非常感谢你,Fabrizio! – laukok