当前位置主页 > 资料库 > 前端教程 > SliceBox-3D幻灯片插件介绍

SliceBox-3D幻灯片插件介绍

2014-11-01

查看演示 下载地址

通过CSS 3D Transforms我们能够创建非常酷的3D效果。Slicebox就使用了CSS 3D Transforms来支持各种不同的3D效果。Slicebox插件的思路是通过插件图片切片,并使它旋转到另一面上,从而产生图片分片3d旋转的效果。如果浏览器不支持3D transforms,那么Slicebox将触发一个回调函数使效果退化。

注意:不是每一个浏览器都支持CSS 3D transforms,最好是使用支持该属性的浏览器观看。

插件中精美的插画来自于花瓣

HTML结构:

首先要创建一个无序列表,并给它class sb-slider

<ul id="sb-slider" class="sb-slider">
    <li>
        <a href="#" target="_blank">
            <img src="images/1.jpg" alt="image1"/>
        </a>
        <div class="sb-description">
            <h3>Creative Lifesaver</h3>
        </div>
    </li>

    <li>
        <img src="images/2.jpg" alt="image2"/>
        <div class="sb-description">
            <h3>...</h3>
        </div>
    </li>
    <li><!-- ... --></li>  
    <!-- ... -->    
</ul>

                            

你可以将图片的描述信息放置在class为sb-description的div中。

调用插件

$('#sb-slider').slicebox();                               
                            

可选参数:

slicebox配有一套齐全的参数选项,使你可以调整各种类型的效果:

$.Slicebox.defaults = {
    // (v)ertical, (h)orizontal or (r)andom
    orientation : 'v',

    // perspective value
    perspective : 1200,

    // number of slices / cuboids
    // needs to be an odd number 15 => number > 0 (if you want the limit higher, 
    // change the _validate function).
    cuboidsCount : 5,

    // if true then the number of slices / cuboids is going to be random (cuboidsCount is overwitten)
    cuboidsRandom : false,

    // the range of possible number of cuboids if cuboidsRandom is true
    // it is strongly recommended that you do not set a very large number :)
    maxCuboidsCount : 5,

    // each cuboid will move x pixels left / top (depending on orientation). 
    // The middle cuboid doesn't move. the middle cuboid's neighbors will 
    // move disperseFactor pixels
    disperseFactor : 0,

    // color of the hidden sides
    colorHiddenSides : '#222',

    // the animation will start from left to right. The left most 
    // cuboid will be the first one to rotate
    // this is the interval between each rotation in ms
    sequentialFactor : 150,

    // animation speed
    // this is the speed that takes "1" cuboid to rotate
    speed : 600,

    // transition easing
    easing : 'ease',

    // if true the slicebox will start the animation automatically
    autoplay : false,

    // time (ms) between each rotation, if autoplay is true
    interval: 3000,

    // the fallback will just fade out / fade in the items
    // this is the time fr the fade effect
    fallbackFadeSpeed : 300,
    
    // callbacks
    onBeforeChange : function( position ) { return false; },
    onAfterChange : function( position ) { return false; }
};                                
                            

你可以查看下载压缩包中的各个例子代码,比对上面的参数,你就能明白它们的作用。

本教程就到这里,希望对你有所帮助。

查看演示 下载地址

Previous:
上一篇:css3图片切换效果
Next:
下一篇:鼠标滑过图片3D折叠效果
返回顶部