Question

我已经制作了一个加载背景图像的包装器，并且在for循环的帮助下出现了许多块。块的宽度取决于窗口宽度除以10.现在我需要根据窗口的高度使块限制并调整窗口的大小。

工作示例jsfiddle

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

Answer 1

你想要这样的东西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

<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

根据jquery中的窗口高度将数字块插入包装器

2 个答案: