Question

我有基于flex的网格和5x5元素。中间的3x3网格是可点击的，单击元素使其背景为红色并调整宽度和高度。其他元素正在调整这个核心元素。

以下是codepen的链接：codepen

现在我想在点击中央红色元素和仅8个周围元素后进行缩放 - 因此只能看到9个元素。接下来当我更改中心元素时，查看更改并单击元素和8个元素。其他元素消失了。最后，我想只看到9个元素并在它们周围移动。

我尝试更改display和opacity，但动画不顺畅。

也许你们有任何解决方案或想法如何解决这个或某些工具/库，这有助于我实现这个目标？

Answer 1

我注意到作为用户，我无法点击最外面的元素。考虑到这一点，这是我的解决方案。

它不漂亮，但它解决了一半的问题（只隐藏，而不是缩放）。

将此添加到您的JavaScript底部。确保在codepen中添加jQuery。另外，here's the working pen基于your own pen。

document.getElementById('app').getElementsByClassName('wrapper')[0].addEventListener("click", function(){
  showAll();
  hideOthers();
});

document.addEventListener("dblclick", function(){
  showAll();
});

function hideOthers() {
  var activeChild = $('.wrapper .center-zoom').index() + 1;
  var indexToHide = [18,17,16,15,14,13,12,11,10,9,8,7,3,2];
  hideThese = new Array(26);
  for(i = 0; i < indexToHide.length; i++){
    hideThese[i] = activeChild - indexToHide[i];
  }

  for(j = 14; j < (indexToHide.length) * 2; j++){
    hideThese[j] = activeChild + indexToHide[j-14];
  }

  for (k = 0; k < hideThese.length; k++) {
     var $target = $(".wrapper div:nth-child(" + hideThese[k]+ ")");
     jQuery($target).css('opacity', '0');
  }
};

function showAll() {
  for(i = 0; i <= 25; i++){
    var $target = $(".wrapper :nth-child(" + i + ")");
    jQuery($target).css('opacity', '1');
  }
}

我正在调查如何进行缩放部分。让我回复你。

Zoomable，可调整大小的柔性网格

1 个答案: