很有创意的3D盒子图片切换效果

虽然只是伪3D效果
服务器君一共花费了189.124 ms进行了4次数据库查询,努力地为您提供了这个页面。
试试阅读模式?希望听取您的建议

前一阵对三角边稍作了一点总结。昨天下班前同事又提到它。我在想,或许我们利用它做的事可能还不止那么多。也许它还能欺骗我们的眼球更多的东西。比如我一直在想的css3中目前只有webkit核心支持的transition变换属性。能否利用三角边做点它能做的事情呢?于是下班回家随便写了点测试的东西。。。发现如果要求不是很严格的话,某些时候还是能欺骗到我们的眼球的。比如下面的一个demo:

乍一看,其实还是有点3d的效果的。不过明眼细心一点就会发现,其实我骗了你们。这哪是什么3d?只是利用三角边耍的一点小把戏。真正的类似的3d效果是按照我们人眼的透视原理,物体高宽根据远近按比例压缩的。而我上面的demo并没有用任何压缩的方法来做高或宽的改变的。看看代码就知道,只是用了一些遮罩来做的掩饰。

所以说这根本不是3d,我在作弊...不过我仍然不怕拍砖的把这种东西作为一种思路分享出来,我是觉得互联网这个行业是需要一些所谓的创意的。可能我上面的粗糙的demo不能说是创意,我希望我的某些"抛砖"或许能"引玉"...

如果对三角边还不甚了解的朋友,可以稍微看下我前文对于三角边的例子,很简单的东西。代码我并没做过多的优化和修正。因为只是昨晚一时兴起写的测试demo。可能有一点点可用性是在于不care IE6表现的朋友,或许可以优化下代码,做成你自己的幻灯片或者其他的演示。

care IE6的朋友仅当一阵清风,因为IE6的三角边支持的确不好,出现斑点我也只能表示无能为力。

最后还是稍稍说一下思路,利用三角边在轮播区域的四个角做了四个遮罩,然后同时改变两张图片的宽度(或高度)以及四个遮罩的borderWidth,稍作调整即可。由于黑色的三角边遮挡了一部分变化的图片,所以不注意的时候会有图片被渐进压缩的感觉。其实仅仅是被遮住了一部分而已。

我只稍作的封装,调用方式和可配置参数如下:

new HR.slider3D({
    id: 'slider',
    maskSize: 6,
    navId: 'nav',
    auto: 4
})

id为轮播列表父元素id,maskSize为视井深度大小,建议为高或宽可以整除的大于3的数。navId为控制器列表id。auto为自动滚动时间间隔。 可以优化的地方:

  • 轮播方向,我只做了向左的变化,同样思路可以做到上下左右四个方向。
  • 缓动算法,我只用了最简单的缓动,感兴趣的同学可以做成更为平滑的缓动。

本文地址:http://www.nowamagic.net/librarys/veda/detail/324,欢迎访问原出处。

不打个分吗?

转载随意,但请带上本文地址:

http://www.nowamagic.net/librarys/veda/detail/324

如果你认为这篇文章值得更多人阅读,欢迎使用下面的分享功能。
小提示:您可以按快捷键 Ctrl + D,或点此 加入收藏

大家都在看

阅读一百本计算机著作吧,少年

很多人觉得自己技术进步很慢,学习效率低,我觉得一个重要原因是看的书少了。多少是多呢?起码得看3、4、5、6米吧。给个具体的数量,那就100本书吧。很多人知识结构不好而且不系统,因为在特定领域有一个足够量的知识量+足够良好的知识结构,系统化以后就足以应对大量未曾遇到过的问题。

奉劝自学者:构建特定领域的知识结构体系的路径中再也没有比学习该专业的专业课程更好的了。如果我的知识结构体系足以囊括面试官的大部分甚至吞并他的知识结构体系的话,读到他言语中的一个词我们就已经知道他要表达什么,我们可以让他坐“上位”毕竟他是面试官,但是在知识结构体系以及心理上我们就居高临下。

所以,阅读一百本计算机著作吧,少年!

《人月神话》 弗雷德里克·布鲁克斯 (作者), 汪颖 (译者)

《人月神话》原文:The Mythical Man-Month: The Essays on Software Engineering, 2nd ed.在软件领域,很少能有像《人月神话》一样具有深远影响力并且畅销不衰的著作。Brooks博士为人们管理复杂项目提供了最具洞察力的见解。既有很多发人深省的观点,又有大量软件工程的实践。本书内容来自Brooks博士在IBM公司System/360家族和OS/360中的项目管理经验。该书英文原版一经面世,即引起业内人士的强烈反响,后又译为德、法、日、俄中等多种语言,全球销量数百万册。确立了其在行业内的经典地位。

更多计算机宝库...