悬停时图像滚动

Question

我想在 div 中制作一个图像以在悬停时向下滚动。这部分正在发挥作用。

另外，如果图像更长，我需要让它滚动更长的时间，因此我试图在过渡内使用 calc，但它不起作用。

这是我的代码：

.preview {
  position: relative;
  width: 75%;
  height: 90vh;
  overflow: hidden;
  border: 1px solid red;
  background-color: transparent;
}

.previewimg {
  width: 100%;
  height: 100%;
  top: 0;
  background-image: url(https://www.n2odesigns.com/wp-
 content/uploads/Projema-Website-Preview-2016.jpg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position-y: 0;
  transition: all calc(0.02s * height) ease-in-out;
}

.previewimg:hover {
  background-position-y: 100%;
  height: 100%;
  transition: all calc(0.02s * height) ease-in-out;
}

<div class="preview">
  <div class="previewimg"></div>
</div>

如果有其他更好的方法可以做到这一点，我也可以使用它。

Answer 1

好的，要做到这一点，您需要它只是图像而不是背景图像，要根据高度功能执行此过渡持续时间，请使用以下代码。

$('.previewimg').css("transition", "transform " + 0.02 * $('.previewimg').height() + "s ease");

.preview {
  position: relative;
  width: 75%;
  height: 300px;
  overflow: hidden;
  border: 1px solid red;
  background-color: transparent;
}

.preview .previewimg {
  width: 100%;
  height: auto;
  transform: translateY(0px); 
}

.preview:hover .previewimg {
  transform: translateY(calc(-100% + 300px)); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="preview">
  <img class="previewimg" src="https://www.n2odesigns.com/wp-content/uploads/Projema-Website-Preview-2016.jpg"/>
</div>