使用窗口调整li正方形的大小

时间:2019-01-14 12:15:43

标签: javascript jquery html css

我有一个全宽度和高度div,上面覆盖着li。 li的宽度为10%,高度为20vh,以适合整个div作为正方形。但是,在调整大小时,这不适用于div。

我尝试使用%和vh,但仍然存在调整大小的问题。我要遵循以下设计:-https://adictic.com/home

jQuery(function($) {
  $('.squares li').mouseenter(function() {
    $(this).animate({
      opacity: '0.4'
    });
  }).mouseout(function() {
    $(this).animate({
      opacity: '0'
    });
  });
});
.squares {
  position: absolute;
  top: 0;
  z-index: 99;
  left: 0;
  padding: 0;
  margin: 0;
  width: 100%;
}

.squares li {
  width: 10%;
  height: 20vh;
  list-style-type: none;
  background: none;
  float: left;
  background: #ccc;
  transition: 0.4s;
  opacity: 0;
  cursor: pointer;
}

main {
  width: 100%;
  height: 100vh;
  background-image: url("/images/bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  display: table;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main>
  <ul class="squares">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</main>

1 个答案:

答案 0 :(得分:0)

这个问题可能是模棱两可的。实施的解决方案肯定是。浏览器可调整大小,因此您不能同时使用正方形和固定宽度的浏览器宽度和高度。 20vh显示您的目标是5行,而10%显示目标是10列。由于无法阻止用户调整窗口大小,因此需要进行权衡。如果最重要的方面是保持正方形,则宽度和高度必须相同。这使您可以选择使用宽度,高度或两者的某种组合作为单位。对CSS进行一些小的更改即可使该正方形的宽度和高度都使用10vh(视口宽度的10%)。

jQuery(function($) {
  $('.squares li').mouseenter(function() {
    $(this).animate({
      opacity: '0.4'
    });
  }).mouseout(function() {
    $(this).animate({
      opacity: '0'
    });
  });
});
  .body, html {
  padding: 0;
  margin: 0;
}

main {
  width: 100vw;
  left: 0;
  height: 100vh;
  background: red;
  position: absolute;
  display: table;
}

.squares {
  position: absolute;
  top: 0;
  z-index: 99;
  left: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  background: blue;
}

.squares li {
  width: 10%;
  height: 10vw;
  list-style-type: none;
  float: left;
  background: none;
  background: #ccc;
  transition: 0.4s;
  opacity: 0;
  cursor: pointer;
  background: orange;
}

.squares li:nth-child(10n+0) {
  clear: left;
}
.squares li:nth-child(10n+10) {  
  right: 0;
  position: absolute;  
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main>
  <ul class="squares">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</main>