Question

我正在制作彩色方块以填充浏览器窗口（例如，水平和垂直重复20px×20px）。

有100种不同的颜色，每种颜色链接到不同的链接（与该颜色相关的博客文章）。

我想用每个彩色方块中的至少1个填充浏览器窗口，然后根据需要重复填充窗口，以便在整个背景上有彩色方块，因为用户拖动窗口越来越大。

如果这些只是图像，设置可重复的背景将起作用。但是，我希望他们成为链接。我不知道从哪里开始。任何想法，提示？

以下是我正在处理的网站的链接：http://spakonacompany.com/

我认为我需要的最具体的部分是：我如何确定重复填充背景所需的方块数，使用jQuery动态计算使用浏览器窗口的大小，包括拖动时的大小，调整大小等等？

非常感谢。：）

Answer 1

要获得浏览器的窗口宽度和高度，我使用此功能 - ＆gt;

//checking if the browser is Internet Explorer    
var isIEX = navigator.userAgent.match(/Trident/);

var doc = isIEX ? document.documentElement : document.body;

function getwWH() {

var wD_ = window;

innerW = wD_.innerWidth || doc.clientWidth;
innerH = wD_.innerHeight || doc.clientHeight;

return {iW:innerW, iH:innerH}

}

还有一种本地方法可以检测浏览器窗口的大小调整，该窗口适用于所有主流浏览器（包括IE 8，如果您计划支持它） - ＆gt;

window.onresize = function(){ 

//here goes the code whenever the window is getting resized

}

因此，为了定义填充窗口需要多少个方块，您可以获取窗口的宽度并将其除以要填充窗口的方块的宽度 - ＆gt;

//获取填充宽度和高度的总方块数

width_ = getwWH().iW; //the width of the window

height_ = getwWH().iH; //the height of the window

如果你的正方形的宽度和高度是20乘20的静态，那么我们可以通过将宽度_ 变量除以20来计算每个窗口的总平方数（对于高度_ ） - ＆gt;

squaresPerWidth = width_/20;
squaresPerHeight = height_/20;

所以每当我们的浏览器窗口调整大小时，我们都会这样做 - ＆gt;

window.onresize = function(){

    width_ = getwWH().iW;
    height_ = getwWH().iH;

    squaresPerWidth = width_/20;
    squaresPerHeight = height_/20;

    //and the rest of the code goes here

}

没有测试过，但这应该可行。

Answer 2

这是我鞭打的东西。它使用固定数量的可调整大小的正方形，但如果您需要固定大小的正方形，则只需将窗口设置为overflow: hidden并生成不合理的大量正方形。

var fillGrid = function(getColor, onClick) {
  var tenTimes = function(f){
    return $.map(new Array(10),
                 function(n, i) {
                   return f(i);
                 });
  };

  var DIV = function() {
    return $('<div></div>');
  };

  var appendAll = function(d, all) {
    $.map(all, function(e)  {
      d.append(e);
    });
    return d;
  };

  appendAll($('body'),
            tenTimes(function(col) {
              return appendAll(DIV().css({ height : "10%" }),
                               tenTimes(function(row) {
                                 return DIV().css({
                                   height : "100%",
                                   width : "10%",
                                   backgroundColor: getColor(row, col),
                                   'float' : "left"
                                 }).click(function() { onClick(row, col); });
                               }));
            }));
};

您必须提供两个功能，一个用于指定颜色，另一个用于在用户点击时调用。

如何动态地确定填充浏览器窗口所需的平方数？

2 个答案: