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