代码之家 › 专栏 › 技术社区 › S. Walker

悬停时引导列放大(如Netflix)

twitter-bootstrap css

S. Walker · 技术社区 · 7 年前

我有一个网格视图,如下所示:

 jQuery(window).resize(function(evt) {
   jQuery(".grid-content > div > div > .channelImage").height(jQuery(".grid-content > div > div > .channelImage").width());
 });
 jQuery(function() {
   jQuery(window).resize();
 });

    body {
      background-color: rgba(48, 48, 48, 1);
    }

    body>.container {
      max-width: 90vw;
    }

    .previewrow {
      height: 40vh;
    }

    .preview {
      position: absolute;
      left: 0;
      right: 0;
      height: 40vh;
    }

    .grid-content>div>div {
      margin: 3vw;
      box-shadow: 6px 6px 6px black;
      border: 1px solid white;
      text-align: center;
      color: white;
    }

    .grid-content>div {
      float: left;
    }

    .grid-content>div>div>.channelImage {}

    .grid-content>div>div>.channelImage:before {
      content: " ";
      display: inline-block;
      height: 100%;
      vertical-align: middle;
    }

    .grid-content>div:hover>div {
      box-shadow: 0 0 0 black;
      transition: all 0.25s;
      margin: 1em;
    }

<!-- Bootstrap and JavaScript -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap-grid.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div class="container body-content">
    <div class="grid-content">

      <!-- One -->
      <div class="col-lg-3 col-md-4 col-sm-3 col-xs-2">
        <div>
          <div class="channelImage">
            <img width="30%" />
          </div>
          <div>
            Some text
          </div>
        </div>
      </div>
      <!-- Two -->
      <div class="col-lg-3 col-md-4 col-sm-3 col-xs-2">
        <div>
          <div class="channelImage">
            <img width="30%" />
          </div>
          <div>
            Some text
          </div>
        </div>
      </div>
      <!-- Three -->
      <div class="col-lg-3 col-md-4 col-sm-3 col-xs-2">
        <div>
          <div class="channelImage">
            <img width="30%" />
          </div>
          <div>
            some text
          </div>
        </div>
      </div>
      <!-- Four -->
      <div class="col-lg-3 col-md-4 col-sm-3 col-xs-2">
        <div>
          <div class="channelImage">
            <img width="30%" />
          </div>
          <div>
            Some text
          </div>
        </div>
      </div>
      <!-- Five -->
      <div class="col-lg-3 col-md-4 col-sm-3 col-xs-2">
        <div>
          <div class="channelImage">
            <img width="30%" />
          </div>
          <div>
            Some text
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

如你所见,每当用户悬停在方块上时,我都试图放大方块。但调整边距会导致其他框被移动。我怎样才能放大方块,使它们不移动其他的盒子?

2 回复 | 直到 7 年前

Jake 7 年前

通过使用下面的css并将其应用于要生效的元素,您可以在不移动任何内容的情况下使某个内容更大:

.class {
  transition: .10s, transform .10s ease;
  -moz-transition: .10s, transform .10s ease;
  -webkit-transition: .10s, transform .10s ease;
}

.class:hover {
  -ms-transform: scale(1.01); /* IE 9 */
  -webkit-transform: scale(1.01); /* Safari */
  transform: scale(1.01);
}

作为奖励,当您单击它以产生类似弹簧的效果时,可以使其收缩:

.class:active {
  -ms-transform: scale(0.99); /* IE 9 */
  -webkit-transform: scale(0.99); /* Safari */
  transform: scale(0.99);
}

Welshboy 6 年前

我只是在想这个,但我没有使用引导程序。

你不能用另一个图像/元素,得到底层元素的x和y坐标,然后放在上面。顶部的元素显示下面元素的内容,但大小更大。你可以把下面的元素的宽度也加宽。让右边的元素移过去。下面的元素不会移动。

我做得很快,效果很好。我唯一的问题是在滚动时得到x,y坐标。

我一写完就把代码寄出去。

谢谢。