我正在制作彩色正方形以填充浏览器窗口(例如,水平和垂直重复20px x 20px)。

有100种不同的颜色,每个链接指向一个不同的链接(与该颜色相关的博客文章)。

我想用每个彩色正方形至少填充一个浏览器窗口,然后根据需要重复填充该窗口,以便随着用户将窗口拖动得越来越大,整个背景上都有彩色正方形。

如果这些只是图像,则可以设置可重复的背景。 但是,我希望它们成为链接。 我不确定从哪里开始。 有什么想法,提示吗?

这是我正在工作的网站的链接: http : //spakonacompany.com/

我认为我在这里需要的最具体的部分是:如何使用jQuery通过浏览器窗口的大小(包括何时拖动,调整大小等)动态地计算出填充背景所需的重复方块数?

非常感谢。 :)

===============>>#1 票数:1 已采纳

要获取浏览器的窗口宽度和高度,我使用此功能->

//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,如果您打算支持它的话)->

window.onresize = function(){ 

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

}

因此,为了定义填充窗口需要多少个正方形,您可以获取窗口的宽度并将其除以要用->填充窗口的正方形的宽度

//获得用于填充宽度和高度的正方形总数

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

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

如果您的正方形的宽度和高度是20乘以20,则我们可以通过将width_变量除以20(对height_相同)来计算每个窗口的正方形总数。

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

因此,每当我们调整浏览器窗口的大小时,我们都会执行此操作->

window.onresize = function(){

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

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

    //and the rest of the code goes here

}

还没有测试过,但是应该可以。

===============>>#2 票数:1

这是我鞭打的东西。 它使用固定数量的可调整大小的正方形,但是如果您需要固定大小的正方形,则只需将窗口设置为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); });
                               }));
            }));
};

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

  ask by heykatieben translate from so

未解决问题?本站智能推荐:

6回复

在保持纵横比的同时在正方形容器中填充图像

我试图在CSS中制作一个图像网格,其中包含非正方形的随机大小的图像。 有没有人有解决方案用图像填充固定大小的div内的所有空间? 看看我的例子(蓝色是固定大小的div,里面的图像是红色的:
2回复

如何在html / css / javascript中动态创建两排正方形

我正在尝试创建2行,每行12个矩形(被认为是一个对象)。 我还想添加一个加号按钮,以便当用户单击任一端时,一组新的矩形会出现在原始矩形的上方或下方。 (取决于他们点击哪个加号按钮)。 我想我的两个加号按钮都起作用了。 因此,我试图实现以下目标: http://i.stack
3回复

动态地在正方形边缘附近对div进行排序并旋转它们

与此处输入链接描述类似。 现在我面对下面的jsfiddle中显示的这个问题: http : //jsfiddle.net/rkqBD/2/ 中间的方形div代表餐桌,桌子上的客人包围。 Div现在按照圆桌排序,但我需要将它们面向正方形/桌子。 问题是桌面上的客人数量是动态变化的。
1回复

完全填充浏览器窗口的多列图像

我希望有很多可点击的图像来覆盖浏览器窗口的宽度。 所以两边都没有空间。 理想情况下,id应该像单个图像一样保持在180x180px的大小,但是如果更容易,它们可以根据浏览器窗口更改大小。 只需要填充空间。 此刻,如果我使包含的div大于主体,它会在右侧造成空间溢出。 如果这样的话。
2回复

带有模式弹出框的正方形网格

我已将正方形编码如下: 我想添加一个功能,当用户单击任何正方形时,将出现一个漂亮的模态弹出窗口。 具有与此https://codepen.io/khaag/pen/sbcou相似样式的模式 如何用我现有的代码实现类似的目标? 另外,如何使此网格图形比我现在拥有的更具动态性?
1回复

如何使用jquery / bootstrap绘制正方形(大小不同)

我正在尝试使用jQuery / bootstrap(用于扩展)绘制某种如下所示的内容,并使用angular进行某种形式的绑定(但是这里的angular并不是很重要)。 问题: 有谁知道如何渲染看起来像这样的东西? 我的目标是每行10个正方形(范围为1到3个立方体),但是我
2回复

正方形内的javascript可点击区域

因此,我尝试根据用户在该区域中的单击位置将类添加到可单击的区域。 我创建了这个示例: http://jsfiddle.net/aocgrp06/ 现在,问题出在这段代码上: 它没有按我希望的那样工作。 从小提琴中可以看到,正方形具有彩色的边缘,然后是中心正方形。 我
1回复

如何更改此网格上各个正方形的颜色……?

我正在制作一个游戏,用户必须在角色周围移动角色并收集乘客。 我已经设法使用一些CSS和jQuery构造了这个网格,但是我需要更改网格中各个正方形的颜色,因为我需要包括三种类型的地形。 目前,我将所有内容保存在一个文件中: 所以我要问的是如何将每个正方形的颜色更改为我选择的颜色?
2回复

单击分割的图像(不是正方形)并进行更改

嗨,我在一个学生网络游戏项目团队中。 我在我们的项目中使用HTML , CSS和JavaScript 。 我想知道如何分割图像以进行单击和更改。 考虑以下图像作为我们的示例: 圆圈有3个部分,如果单击它们,则必须更改它们,但是我找不到如何分割图像的方法。 每当用户单击零件
1回复

进行基于jQuery的正方形调整大小

所以我有一个,其中每个li是一个正方形。 现在 CSS的宽度基于的百分比,希望它具有响应能力。 因此,我使用jQuery获得与宽度相同的高度,以使其成为正方形。 但是,在调整大小时,仅会影响宽度,而高度将保持其原始的加载值。 无论如何要解决这个问题? 这是我的代码: 这是