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

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