我找到了这个示例,它看起来不错,所以我从 bootstrap 中放了一个缩略图。
我喜欢在我开发的网站上实现它。
http://hotmeltcoatingmachines.com/
我想要的是通过单击按钮翻转缩略图。 我怎样才能做到这一点。
谢谢
<div class="flip">
<div class="card">
<div class="face front">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>front</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Flip</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
<div class="face back">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>back</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">flip</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
最佳答案
@menaka 的回答将翻转所有图标。如果你只想翻转被点击的图标,那么使用如下的东西:
$('.fliper-btn').click(function(e){
$(e.target).closest('.flip').find('.card').toggleClass('flipped');
});
确保按照@menaka 的建议保留自定义类 fliper-btn
。
<a href="#" class="btn btn-primary fliper-btn" role="button">Flip</a>
关于javascript - 通过单击按钮翻转缩略图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37314459/