jquery

Question

'daki pencere yüksekliğine göre sarıcıya sayı blokları ekleyin. Bir arka plan resmi yükleyen bir sarmalayıcı yaptım ve bir for döngüsü yardımı ile görünen blok sayısı var. Blokların genişliği, pencere genişliğinin 10'a bölünmesine bağlıdır. Artık, blokların pencerenin yüksekliğine göre sınırlanmasını ve pencerenin yeniden boyutlandırılmasında çalışmam gerekiyor.

çalışma örneği jsfiddle

[1]: [http://jsfiddle.net/RaVDJ/1/][1] 

Answer 1

bu http://jsfiddle.net/slash197/RaVDJ/5/

CSS

html { 
    height: 100%; margin: 0px; padding: 0px; 
} 
body { 
    background: url(http://wallpaperfast.com/wp-content/uploads/2013/05/Beautiful-Beach-Wallpaper.jpg) no-repeat; 
    background-size: auto 100%; 
    height: 100%; margin: 0px; padding: 0px; 
} 

.wrap { 
    margin: 0px; 
    width: 100%; 
    height: 100%; 
} 

.wrap div { 
    float: left; 
    background-color: #cc0000; 
    opacity: 0.5; 
    cursor: pointer; 
    margin: 1px; 
    transition: opacity 0.3s linear; 
} 
.wrap div:hover { 
    opacity: 0; 
} 

HTML

gibi bir şey istiyor musunuz

<div class="wrap"></div> 

JS

$(document).ready(function() { 
    addBoxes(); 
}); 
$(window).resize(addBoxes); 

function addBoxes() 
{ 
    $('.wrap').html(""); 

    var size = Math.floor($('.wrap').width()/10); 
    var sizeInner = size - 2; 
    var tw = Math.floor($('.wrap').width()/size); 
    var th = Math.floor($('.wrap').height()/size); 

    for (var i = 0; i < th; i++) 
    { 
     for (var j = 0; j < tw; j++) 
     { 
      $('.wrap').append('<div style="width: ' + sizeInner + 'px; height: ' + sizeInner + 'px;"></div>'); 
     } 
    } 
} 

Answer 2

HTML

CSS

body{background:url(http://wallpaperfast.com/wp-content/uploads/2013/05/Beautiful-Beach-Wallpaper.jpg) no-repeat;background-size:100%;} 
.wrapper{width:100%;} 
.on{opacity:0;cursor:pointer;} 
.block{/*width:100px;height:100px;*/display:block;float:left;} 
.inner-block{display:block;background:rgba(255, 255, 255, 0.4);margin:1px;height:98%;width:98%;} 

JS

$(document).ready(function() { 

// Get scrollbar width 
    function getScrollbarWidth() { 
    var outer = document.createElement("div"); 
    outer.style.visibility = "hidden"; 
    outer.style.width = "100px"; 
    document.body.appendChild(outer); 
    var widthNoScroll = outer.offsetWidth; 
    outer.style.overflow = "scroll"; 
    var inner = document.createElement("div"); 
    inner.style.width = "100%"; 
    outer.appendChild(inner);   
    var widthWithScroll = inner.offsetWidth; 
    outer.parentNode.removeChild(outer); 
    return widthNoScroll - widthWithScroll; 
    } 

// Get scrollbar width 

    var winWidth = $(window).width() - getScrollbarWidth(); 
    var winHeight = $(window).height(); 


    var winRatio = winWidth/winHeight; 
    //alert(winWidth); 
    var numBlock = (winWidth/10); 

    var blockHeight = numBlock; 
    var i; 
    for(i=0;i<numBlock;i++){ 

      $('.wrapper').append('<div class="block"><div class="inner-block"></div></div>'); 
      $(".block").css({"width":numBlock +'px', "height":blockHeight +'px'}); 
     } 
    $(function(){ 
    $(".block").hover(function(){ 
     var elem = $(this); 
     setTimeout (function(){ 
      elem.addClass("on"); 
     }, 100) ; 
     },function(){ 
     var elem = $(this); 
     setTimeout (function(){ 
      elem.removeClass("on"); 
     }, 200) ; 
    }) 
    }); 

    $(window).resize(function(){ 

var winWidth = $(window).width() - getScrollbarWidth(); 
var winHeight = $(window).height(); 
var winRatio = winWidth/winHeight; 
//winRatio = Math.min(winRatio, 1.0); 
$(".block").width($(".block").width()*winRatio); 
$(".block").width($(".block").height()*winRatio); 


           }) 

}); 

Example