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