通过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中。
调用插件
|
1
|
$('#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; }}; |
你可以查看下载压缩包中的各个例子代码，比对上面的参数，你就能明白它们的作用。
