使用 jQuery & CSS3 实现 3D 图片滑块效果
使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果。 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不同的效果。
温馨提示:为保证最佳的效果,请在 IE10+、Chrome、Firefox 和 Safari 等现代浏览器中浏览。
温馨提示:为保证最佳的效果,请在 IE10+、Chrome、Firefox 和 Safari 等现代浏览器中浏览。
实现的基本思路是创建三维图像切片,作为三维物体的另一侧,旋转并显示下一个图像。若浏览器不支持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)andomorientation : '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; }};
源码下载 在线演示
【使用 jQuery & CSS3 实现 3D 图片滑块效果】相关文章
1. 使用 jQuery & CSS3 实现 3D 图片滑块效果
2. 使用 jQuery & CSS3 实现 3D 图片滑块效果
9. 使用 jQuery & CSS3 实现优雅的手风琴效果
10. 使用 jQuery & CSS3 实现优雅的手风琴效果
本文来源:https://www.51html5.com/a1293.html
上一篇:9个最好的 jQuery 视频插件
下一篇:你需要的最后一款jQuery传送带插件
﹝使用 jQuery & CSS3 实现 3D 图片滑块效果﹞相关内容
- Image Wall - jQuery & CSS3 图片墙效果
- 学习使用 jQuery & CSS3 制作照片堆栈效果
- CSS3 animate实现图片墙3D翻转效果
- 使用jQuery和CSS3弹出图像滑块
- 使用jQuery和CSS3弹出图像滑块
- jQuery/CSS3 3D焦点图动画 多种炫酷图片切换特效
- 纯css3 transforms 3D文字翻开翻转3D开放式效果
- 使用 jQuery & CSS3 制作美丽的照片画廊
- Arctext.js - 基于 CSS3 & jQuery 的文本弯曲效果
- 响应式&触摸友好的 jQuery 滑块插件