使用 CSS3 的3D变换特性，我们可以通过让元素在三维空间中变换来实现一些新奇的效果。 这篇文章分享的这款 jQuery 立体图片滑块插件，利用了 3D transforms（变换）属性来实现多种不同的效果。
温馨提示：为保证最佳的效果，请在 IE10+、Chrome、Firefox 和 Safari 等现代浏览器中浏览。
实现的基本思路是创建三维图像切片，作为三维物体的另一侧，旋转并显示下一个图像。若浏览器不支持3D变换，一个简单的滑块将作为后备方案。要调用这个插件，首先把图片放在无序列表中，然后添加 CSS 类——"sb-slider" 即可，下面是 HTML 代码示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<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 配备了一组选项，你可以调整以实现不同类型的效果，各个选项和作用如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
$.Slicebox.defaults = { // 方向(v)ertical, (h)orizontal or (r)andom
orientation : ‘v‘,
// 元素距离视图的距离，以像素计
perspective : 1200,
// 切片，长方体的数量
cuboidsCount : 5,
// 是否随机
cuboidsRandom : false,
// 长方体最大数量
maxCuboidsCount : 5,
disperseFactor : 0,
// 隐藏滑块的颜色
colorHiddenSides : ‘#222‘,
sequentialFactor : 150,
// 动画速度
speed : 600,
// 过渡效果
easing : ‘ease‘,
// 自动播放
autoplay : false,
// 旋转间隔
interval: 3000,
// 淡入淡出速度
fallbackFadeSpeed : 300,
// 回调函数
onBeforeChange : function( position ) { return false; },
onAfterChange : function( position ) { return false; }
}; |