码迷,mamicode.com
首页 > Web开发 > 详细

使用CSS3实现3D图片滑块效果

时间:2014-06-21 09:26:35      阅读:223      评论:0      收藏:0      [点我收藏+]

标签:des   class   blog   code   http   tar   

  使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果。 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不同的效果。

  温馨提示:为保证最佳的效果,请在 IE10+、Chrome、Firefox 和 Safari 等现代浏览器中浏览。

bubuko.com,布布扣

  实现的基本思路是创建三维图像切片,作为三维物体的另一侧,旋转并显示下一个图像。若浏览器不支持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; }
 
};

源码下载      在线演示

使用CSS3实现3D图片滑块效果,布布扣,bubuko.com

使用CSS3实现3D图片滑块效果

标签:des   class   blog   code   http   tar   

原文地址:http://www.cnblogs.com/ranran/p/3795007.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!