您所在的位置:小祥子 » 编程 » JavaScript » 正文

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

时间:2015-05-20 编辑:拎壶充 来源:本站整理

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

在线预览    源码下载

实现的代码。

html代码:

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

关键词:图片 弹出 特效 代码