使用 jQuery 翻转图像答案

【问题标题】：Flip Image Using jQuery使用 jQuery 翻转图像
【发布时间】：2017-05-13 18:09:14
【问题描述】：

我正在尝试在一个简单的 HTML 脚本中翻转图像。我找到了这个jQuery plugin，从示例中可以完成我需要做的事情。

但是，当我尝试在 Brackets 中执行此操作时，没有任何反应。

我读过类似我的标题的问题，但我想要的效果不在他们问题中使用的插件中。

这是我编写的代码，非常简单（微不足道！）：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>Test Flip</title>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

        <script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>

    </head>

    <body>

        <div id="card"> 
          <div > 
            <img src="http://lorempixel.com/400/400/" id="top">
          </div> 
          <div>
            <img src="http://lorempixel.com/400/300/" id="bottom">
          </div> 
        </div>

        <script type="text/javascript">

            $("#top").flip({axis: 'x', 
                            trigger: 'hover'})

        </script>

    </body>
</html>

【问题讨论】：

在插件文档中它说如何使用在您的 HTML 文件中，创建一个 <div>，其中有两个 <div>s，其中类 .front 和 .back 你没有这样做。此外，您还试图通过调用 $("#top").flip 而不是 $("#card").flip 来翻转顶部图像而不是卡片
是插件本身的.front 和.back 类吗？ @詹姆斯
.front 和 .back 是插件如何知道哪些内容应该在卡片的正面以及哪些内容应该在卡片的背面。如果你告诉它，它看起来插件支持其他类名，但默认情况下它就是这样寻找的。span>
@James 非常感谢它的工作。一开始我不明白插件对分配的类意味着什么。但多亏了你，我想通了。再次感谢。
您可以添加答案，以便我接受。 @詹姆斯

标签： javascript jquery html css plugins

【解决方案1】：

确保您已告诉插件您希望在“卡片”div 中的哪些内容出现在正面和背面。默认情况下，插件会查找“front”和“back”类名，设置如下：

<div id='card'>
  <div class='front'>This is what appears on the front</div>
  <div class='back'>This is what appears on the back</div>
</div>

还要确保在包装元素上调用 .flip 函数（即 id=='card'）

$("#card").flip(params...);

【讨论】：