Question

我试图用简单的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>

Answer 1

确保您告诉插件您的＆＃34;卡中的哪些内容＆＃34; div你想要出现在正面和背面。默认情况下，该插件会查找＆＃34; front＆＃34;和＆＃34;返回＆＃34;类名设置如下：

<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 ==＆＃39; card＆＃39;）

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

使用jQuery翻转图像

1 个答案: