基于jQuery图片弹出翻转特效代码

分享一款基于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");

            }
        });

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