九乡新闻网长生谣有言情吗:很有创意的3D盒子图片切换效果
来源：百度文库 编辑：九乡新闻网 时间：2024/04/29 11:34:51
很有创意的3D盒子图片切换效果
2010-11-29
前一阵对三角边稍作了一点总结。昨天下班前同事又提到它。我在想，或许我们利用它做的事可能还不止那么多。也许它还能欺骗我们的眼球更多的东西。比如我一直在想的css3中目前只有webkit核心支持的transition变换属性。能否利用三角边做点它能做的事情呢？于是下班回家随便写了点测试的东西。。。发现如果要求不是很严格的话，某些时候还是能欺骗到我们的眼球的。比如下面的一个demo：
对于使用IE6的同学看到的斑点，我只能表示很无奈。。。
乍一看,其实还是有点3d的效果的。不过明眼细心一点就会发现，其实我骗了你们。这哪是什么3d？只是利用三角边耍的一点小把戏。真正的类似的3d效果是按照我们人眼的透视原理，物体高宽根据远近按比例压缩的。而我上面的demo并没有用任何压缩的方法来做高或宽的改变的。看看代码就知道，只是用了一些遮罩来做的掩饰。
所以说这根本不是3d，我在作弊...不过我仍然不怕拍砖的把这种东西作为一种思路分享出来，我是觉得互联网这个行业是需要一些所谓的创意的。可能我上面的粗糙的demo不能说是创意，我希望我的某些"抛砖"或许能"引玉"...
如果对三角边还不甚了解的朋友，可以稍微看下我前文对于三角边的例子，很简单的东西。代码我并没做过多的优化和修正。因为只是昨晚一时兴起写的测试demo。可能有一点点可用性是在于不care IE6表现的朋友，或许可以优化下代码，做成你自己的幻灯片或者其他的演示。
care IE6的朋友仅当一阵清风，因为IE6的三角边支持的确不好，出现斑点我也只能表示无能为力。
最后还是稍稍说一下思路，利用三角边在轮播区域的四个角做了四个遮罩，然后同时改变两张图片的宽度（或高度）以及四个遮罩的borderWidth，稍作调整即可。由于黑色的三角边遮挡了一部分变化的图片，所以不注意的时候会有图片被渐进压缩的感觉。其实仅仅是被遮住了一部分而已。
我只稍作的封装，调用方式和可配置参数如下：
1new HR.slider3D({2 id: 'slider',3 maskSize: 6,4 navId: 'nav',5 auto: 46})id为轮播列表父元素id，maskSize为视井深度大小，建议为高或宽可以整除的大于3的数。navId为控制器列表id。auto为自动滚动时间间隔。 可以优化的地方：
- 轮播方向，我只做了向左的变化，同样思路可以做到上下左右四个方向。
- 缓动算法，我只用了最简单的缓动，感兴趣的同学可以做成更为平滑的缓动。