Question

我在列表中悬停时实现第二张图片。这在产品的列表视图中非常常见。关于如何做到这一点，我有两个想法：

将两张图像放在彼此之上

<div class="container" />

然后隐藏一个图像，当悬停包装时，我将用css显示它。

或者我会做一个div：

.container

然后使用内联css在- (void)Move3dPan:(UIPanGestureRecognizer *)gesture { if (gesture.state == UIGestureRecognizerStateChanged) { CGPoint displacement = [gesture translationInView:self.view]; CATransform3D currentTransform = self.popUpView.layer.sublayerTransform; if (displacement.x==0 && displacement.y==0) { // no rotation, nothing to do return; } CGFloat totalRotation = sqrt(displacement.x * displacement.x + displacement.y * displacement.y) * M_PI / 360.0; CGFloat xRotationFactor = displacement.x/totalRotation; CGFloat yRotationFactor = displacement.y/totalRotation; CATransform3D rotationalTransform = CATransform3DRotate(currentTransform, totalRotation, (xRotationFactor * currentTransform.m12 - yRotationFactor * currentTransform.m11), (xRotationFactor * currentTransform.m22 - yRotationFactor * currentTransform.m21), (xRotationFactor * currentTransform.m32 - yRotationFactor * currentTransform.m31)); [CATransaction setAnimationDuration:0]; self.popUpView.layer.sublayerTransform = rotationalTransform; [gesture setTranslation:CGPointZero inView:self.view]; } }上设置背景图片。

我当然也可以用javascript做点什么。

这些解决方案如何影响悬停和页面加载时的性能？有更好的解决方案吗？该网站建立在反应中。

Answer 1

由于您正在使用react，您可以通过状态简单地管理第二个图像的可见性。但是如果你只有两个图像并且不需要任何类型的图像循环，那么使用css应该是具有最佳性能的解决方案。

使用您当前的设置：

<div class="wrapper">
  <img src="1.jpg" />
  <img src="2.jpg" />
<div>

将第一张图片放在第二张图片的顶部。然后在悬停时隐藏第一个元素。

这对性能/加载时间的唯一影响是，您将在页面加载时为每个项目获取两个图像。反过来使用react，直到你将它渲染到DOM中才会加载第二个图像（但是如果图像需要一些时间来加载，它看起来不会那么平滑）。但是，原生css转换比使用react解决这个问题要有效得多。至少对于这个小用例。

如果你想用反应来解决它，我建议尝试你的backgroundImage方法。只需跟踪组件中的悬停状态，并相应地切换背景图像。

Answer 2

我认为，最简单的方法是：

.sample {
  background: url(http://placehold.it/200?text=First) center/cover no-repeat;
  height: 200px;
  width: 200px;
}
.sample:hover {
  background-image: url(http://placehold.it/200?text=Second);
}

<div class="sample"></div>

内联图像路径：

.sample {
  background: url() center/cover no-repeat;
  height: 200px;
  width: 200px;
}
.sample:hover img {
  opacity: 0;
}

<div class="sample" style="background-image: url('http://placehold.it/200?text=Second')">
  <img src="http://placehold.it/200?text=First" />
</div>

在悬停上实施第二张图像时有哪些重要因素？

2 个答案: