我正在尝试以简单的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>

最佳答案

确保已告知插件您要在“ card” div中的哪些内容显示在正面和背面。默认情况下,插件会查找按以下方式设置的“前”和“后”类名:

<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...);

关于javascript - 使用jQuery翻转图片,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/43956404/

10-11 11:07