跳跃的圆形幻灯片

妖狐艹你老母 2022-04-23 01:30 102阅读 0赞

日期：2013-3-8  来源：[GBin1.com][]

[![跳跃的圆形幻灯片][title.jpg]][title.jpg 1]

[在线演示 ][Link 1]

今天我想要与你分享一个即简单又有趣的圆形幻灯片。这是一个实验性的概念，此想法是在一个特定的角度点击圆形图片，就会翻转到另一个圆形图片。分为 三种不同的可能性：顶部、中部、底部。例如，当单击右上部分的图像时，将在相关角度翻转，使它看起来好像我们压到的那部分翻了过去，显示出它背面的图像。

![跳跃的圆形幻灯片][1.jpg]

结构：

<div id="fc-slideshow" class="fc-slideshow">
        <ul class="fc-slides">
            <li><img src="images/1.jpg" /><h3>Hot</h3></li>
            <li><img src="images/2.jpg" /><h3>Cold</h3></li>
            <li><img src="images/3.jpg" /><h3>Light</h3></li>
            <li><img src="images/4.jpg" /><h3>Dark</h3></li>
            <li><img src="images/5.jpg" /><h3>Soft</h3></li>
            <li><img src="images/6.jpg" /><h3>Hard</h3></li>
            <li><img src="images/7.jpg" /><h3>Smooth</h3></li>
            <li><img src="images/8.jpg" /><h3>Rough</h3></li>
        </ul>
    </div>

我们把它改成：

这个nav元素有一些空的spans，做为“检测领域”。圆的每一边有三个可点击地区，一个在上面、一个在中 间、一个在底部。i元素将作为导航箭头，并取决于我们悬浮在哪个span上，我们将旋转这个小箭头到正确的位置。但是我们不会使用箭头做为点击区域，而是 整个span。

圆的分区包含一个特殊的三维结构：它有一个前面和一个背面。一旦我们导航到下一个或前一个项目，我们将展示出它的结构并旋转这个容器，这样我们可以看到背面。

覆盖图提供光线和阴影让一切看起来更切合实际，透明度取决于旋转角度。

简单插件：

$( '#fc-slideshow' ).flipshow();

加上这些，变成可选的插件：

// the options
    $.Flipshow.defaults = {
        // default transition speed (ms)
        speed : 700,
        // default transition easing
        easing : 'cubic-bezier(.29,1.44,.86,1.06)'
    };

请注意，这是一个实验性的并且只会在支持CSS 3d变换的浏览器上工作。对其他不支持的浏览器只会有一个简单的回退，仅仅显示和隐藏了前一个或后一个项目。

希望这个小插件能给你带来灵感！

via [ gbtags][gbtags]

来源：[跳跃的圆形幻灯片][GBin1.com]

[GBin1.com]: http://www.gbin1.com/technology/jquerynews/20130308-round-slider/
[title.jpg]: http://www.gbin1.com/technology/jquerynews/20130308-round-slider/title.jpg
[title.jpg 1]: http://www.gbin1.com/technology/jquerynews/20130308-round-slider/index.html
[Link 1]: http://gbtags.com/gb/share/424.htm
[1.jpg]: http://www.gbin1.com/technology/jquerynews/20130308-round-slider/1.jpg
[gbtags]: http://www.gbin1.com/gb/share/424.htm