jQuery和css3超酷三面折纸3D幻灯片插件

当前位置:主页 > jQuery库 > 幻灯片和轮播图 > jQuery和css3超酷三面折纸3D幻灯片插件
jQuery和css3超酷三面折纸3D幻灯片插件
分享:

    插件介绍

    这是一款很有特色的jQuery和css3超酷三面折纸3D幻灯片插件。整个3D幻灯片就像一张纸折了3折,在图片轮播时,下一张图片从左向右滑出。两边的纸张鼠标滑过时还有一点浮动效果。

    浏览器兼容性

    浏览器兼容性
    时间:2014-11-25
    阅读:

简要教程

这个插件是一款jQuery和css3超酷三面折纸3D幻灯片插件。插件中使用了CSS 3D Transforms、透视和CSS Transitions。

插件中精美的卡片插图来自于花瓣-发现、采集你喜欢的一切

HTML

该3d幻灯片插件的初始html结构如下:使用一个div包含两个figures,每个figures中包含一张图片和一个包含了图片标题和描述的figcaption

<div class="fs-slider" id="fs-slider">
    <figure>
        <img src="images/1.jpg" alt="image01" />
        <figcaption>
            <h3>Eloquence</h3>
            <p>American apparel flexitarian put a bird on it, mixtape typewriter irony aesthetic. </p>
        </figcaption>
    </figure>

    <figure>
        <img src="images/2.jpg" alt="image02" />
        <figcaption>
            <h3>Quintessential</h3>
            <p>Cardigan craft beer mixtape, skateboard forage fixie truffaut messenger bag. </p>
        </figcaption>
    </figure>
    <!-- ... -->
</div>
                

在插件运行时,我们需要使用jQuery将html结构改为如下:

<section class="fs-container">
    <div class="fs-wrapper">
        <div class="fs-slider" id="fs-slider">
            <div class="fs-block">

                <figure style="display: block; ">
                    <img src="images/1.jpg" alt="image01" />
                    <figcaption>
                        <h3>Eloquence</h3>
                        <p>American apparel flexitarian put a bird on it, mixtape typewriter irony aesthetic. </p>
                    </figcaption>
                </figure>

            </div><!-- /fs-block -->

            <div class="fs-block">
                <!-- ... -->
            </div>
            <!-- ... -->
        </div><!-- /fs-slider -->
        <nav class="fs-navigation">
            <span>Previous</span>
            <span>Next</span>
        </nav>
    </div><!-- /fs-wrapper -->
</section><!-- /fs-container -->
                

每一个figure都被包装到class为fs-block的div中。

css代码和js代码请参考下载文件。