建站中的
点点滴滴

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

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

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

jzcoder的PHP学习笔记

  实现的基本思路是创建三维图像切片,作为三维物体的另一侧,旋转并显示下一个图像。若浏览器不支持3D变换,一个简单的滑块将作为后备方案。要调用这个插件,首先把图片放在无序列表中,然后添加 CSS 类——"sb-slider" 即可,下面是 HTML 代码示例:

<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 : 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; }

};

源码下载      在线演示

未经允许不得转载:建站笔记 » [js]使用CSS3实现3D图片滑块效果

分享到:更多 ()

评论 抢沙发

评论前必须登录!

 

学建站就来建站笔记,提供一切有关建站的知识

关于站长加入我们