分享一款基于jQuery图片弹出翻转特效代码。这是一款基于jQuery+HTML5实现的，里面包含六款不同效果的鼠标点击图片弹出特效下载。效果图如下：

在线预览    源码下载

实现的代码。

html代码：

 <section class="main">
	<article>
		<div class="imgContainer">
			<h5>效果一</h5>
			<img src="images/chinaz.jpg"	data-expander='{animation:"default"}'>
		</div>
		<div class="imgContainer">
			<h5>效果二</h5>
			<img src="images/chinaz.jpg"	data-expander='{animation:"diamond"}'>
			
		</div>
		<div class="imgContainer">
			<h5>效果三</h5>
			<img src="images/chinaz.jpg"	data-expander='{animation:"turn3d"}'>
		</div>
		<div class="imgContainer">
			<h5>效果四</h5>
			<img src="images/chinaz.jpg"	data-expander='{animation:"flip3d"}'>
		</div>
		<div class="imgContainer">
			<h5>效果五</h5>
			<img src="images/chinaz.jpg"	data-expander='{animation:"rotate"}'>
		</div>				
		<div class="imgContainer">
			<h5>效果六</h5>
			<img src="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");

            }
        });

via：http://www.w2bc.com/Article/39023

在线预览    源码下载