微博点击图片放大html,新浪微博图片放大效果[artZoom.js]

(本文示例脚本于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多一点]