(本文示例脚本于2010-05-28更新)
如果说09年是SNS年,那10年肯定微博年,各大网站都推出或者准备推出自己的微博。我这几天都在看新浪微博,对新浪微博的用户体验很欣赏,有些细节我自己也琢磨了下,据我所知其界面是大名鼎鼎的eico设计的,其前端架构很非常不错。
步入正题。
我点击新浪微博缩略图的时候会快速的置换一张大图,并且鼠标会显示放大或者缩小的指针,新浪前端工程师吧视口的大图片都预加载了,所以点击缩略图后替换大图的过程很爽快(PS:大家都知道点击Qzone的缩略图会出现什么)。
这种简约的效果非常适合插在内容区域单幅图片显示,放大后也不会干预用户操作,难怪很多微博客都采用(如:聚友旗下的911微博)。
其中有一个令我很惊讶的功能,图片可以自由旋转,这功能如何实现?
CSS属性?貌似只有IE可以用CSS私有滤镜
javascript?还没有听说过有这个内置方法
服务端处理?极度消耗服务器资源,而且响应会很迟钝
最用用firebug查看才知道是canvas实现的,它是未来的WEB标准的新产物,目前只有IE浏览器不支持它,但IE有个私有滤镜可以实现图片旋转。
图片展示用jQuery做是最轻松不过的是事情,一个预加载图片,一个动画基本上就可以搞定,而canvas图片旋转有个jQuery插件支持,于是我的”artZoom”就踏在前人的肩膀上出来了。
写完最后检测的时候发现IE8对其私有滤镜处理与IE6,IE7不一样,图片旋转后不会替换原来高度,结果把下面的元素盖住了。而新浪微博在IE8下这个BUG也没有修复。
我尝试用js对IE8置换图片长宽处理,仍然无法实现,最后动态改变图片外包元素高度来修复了这个问题。
查看文件:
artZoom
[需要jQuery库支持,artZoom.js 4kb多一点]