javascript - 如何在一组图像中创建单个图像翻转效果？

Question

我有 4 个部分 - 每个部分都有一张图片和一些文本。

<div class=container>
 <div class=row>
  <div class="1"> img 1 </div>
  <div class="1"> img 2 </div>
 </div>
 <div class=row>
  <div class="1"> img 3 </div>
  <div class="1"> img 4 </div>
</div>

我正在尝试实现图像翻转效果 - 那里有很多。

当我悬停或触摸(移动)时 - 我希望图像翻转并显示一些文本。

我想做的是让系统只允许一个图像与一些文本保持翻转。

我想开始(加载页面时)只有图像 1 与文本翻转 - 其他 4 个是图像。当有人悬停/触摸其他图像时，img 1 重置 - 另一个显示文本。

有什么模块可以帮助我吗？我已经在使用 jquery latest 和 pure/skeleton 来处理响应式图像。

编辑1:

通过翻转效果 - 我的意思是

http://codepen.io/ilanf/pen/gjoKl

谢谢

Answer 1

首先是“干得好!”。我喜欢你的效果。

回答你的问题:

1. 要在页面加载时翻转其中一张图片，您必须将其与其余图片分开，并使用 backface 作为默认状态。 “分开”是指使用不同的类名、ID 或名称。

2. 现在，根据您给我们的 codepen fiddle，同时翻转多个图像是不可能的，因为当 mouseout 事件被触发时，图像会翻转回其默认状态.

3. 要在悬停另一张图片时翻转默认可见文本的图片，请使用此 jQuery 脚本:

---

/* Let's suppose you give the image you want originally flipped an
extra class = "default-flipped" */

$(".1").on("mouseover", function() {
    if ($(this).siblings().hasClass("default-flipped")) {
        $("default-flipped").css("transform", rotateY(180deg);
    }
});

---

编辑:

正如我所 promise 的，这是您所要求的工作版本；或者基本上是我理解你要求的。

既然你已经找到了喜欢并想要复制的工作 fiddle ，我认为试图重新发明轮子是完全没有意义的。

→ 有一些东西你必须添加到 CSS，当然还有一些 jQuery:

CSS:

/* We create a pre-flipped class for the element you want already flipped 
when the page loads. */
.pre-flipped {
    transform: rotateY(180deg);
    /* That's what the card are supposed to do on hover
    Our already flipped card must already have this rule
    in order to be flipped from the start. */
}

/* If you want the images to be inline change the display
from block to inline-block as shown: */
.flip-images .card-wrapper {
    display: inline-block;
}

在您的 fiddle 的 CSS 中，有一段代码如下所示，用于在悬停时翻转卡片:

.flip-images .card-wrapper:hover .card {
    transform: rotateY(180deg);
} /* I removed it and as it makes things complicated
  when trying to create the hover effect from jQuery. */

从 CSS 的 Angular 来看就是这样。

jQuery:

$(document).ready(function() {
    // mouseover event
    $(".card-wrapper").on("mouseover", function() {
        // Always leaves one open
        $(this).children().css("transform", "rotateY(180deg)");
        $(this).siblings().children().css("transform", "rotateY(0deg)");
    });
});

检查这个codepen看看它是如何工作的! 😊