分享一款基于jQuery图片弹出翻转特效代码。这是一款基于jQuery+HTML5实现的，里面包含六款不同效果的鼠标点击图片弹出特效下载。效果图如下：
实现的代码。
html代码：
<section class="main">
<article>
<div class="imgContainer">
<h5>效果一</h5>
<img src="data:images/chinaz.jpg" data-expander='{animation:"default"}'>
</div>
<div class="imgContainer">
<h5>效果二</h5>
<img src="data:images/chinaz.jpg" data-expander='{animation:"diamond"}'> </div>
<div class="imgContainer">
<h5>效果三</h5>
<img src="data:images/chinaz.jpg" data-expander='{animation:"turn3d"}'>
</div>
<div class="imgContainer">
<h5>效果四</h5>
<img src="data:images/chinaz.jpg" data-expander='{animation:"flip3d"}'>
</div>
<div class="imgContainer">
<h5>效果五</h5>
<img src="data:images/chinaz.jpg" data-expander='{animation:"rotate"}'>
</div>
<div class="imgContainer">
<h5>效果六</h5>
<img src="data:images/chinaz.jpg" data-expander='{animation:"fade"}'> </div>
</article>
</section>
js代码：
var index = 0;
var timeout = setInterval(function () {
if (index > 10) {
window.clearInterval(timeout)
}
$("article").eq(index).addClass("show");
index++
}, 300); function showFoo() {
$("#fooId").trigger("expand");
} $("#expandSettings").on("click", function () {
if ($("ul.settings").hasClass("open")) {
$("ul.settings").removeClass("open");
} else {
$("ul.settings").addClass("open"); }
});
