新浪微博图片放大效果[artZoom.js] 先留个言
16 三 2010
(本文示例脚本于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多一点]
- 18 个评论
-
标签：jQuery
18 Responses for "新浪微博图片放大效果[artZoom.js]"
-
tommy 说：
能否发送一份最新的代码至我的邮箱，万分感谢
实际使用中IE6有些问题~ -
深蓝心语 说：
其实还是有问题的，不过在IE8还是谷歌游览器，第一次放大后的图片是全图，但旋转后就不是了。不知道作者发现没？
-
-
发我一份邮箱，感谢，还有artdialog最新版本。嘻嘻
-
zhangyalin 说：
唐哥,请发一份到我的邮箱,谢谢！
-
-
-
Yen 说：
您好!請問這個功能怎麼運用在其他部落格上呢?
-
-
billy 说：
good ,where to download ?
-
abc 说：
ie7下图片旋转后图片会不断变大，研究了下没找到问题所在，希望老大修复下这个问题。
-
有个小小的bug一直旋转图片会增大……
-
[...] 据说,这是一个最近很流行的效果,新浪微博,腾讯微博,都用到了这种效果,本博开博时也追随潮流用上了这种效果,今天又在经典论坛中看到了这个效果. 具体使用及核心JQ代码,请点此查看DEMO 声明一下,本文实例及代码原作者为唐斌同学(他的博客很棒哦~),原文地址:http://www.planeart.cn/?p=696,感谢唐斌同学:). [...]
-
fancy 说：
太感谢你了，正在找这个效果找了好久都没有找到，谢谢啦
-
kering 说：
我用上去一直不行啊,效果,加上去就显示不出来,不知道什么原因,与网页采用的编码有关系么,或者能调用跨域的图片吗
-
guge 说：
这个效果已经很棒了 谢谢分享
老大可晓得新浪微博中”@xx”是如何实现的，就是发的微博内容中出现“@”以后紧跟其后的文字（有空格之前）都会变成链接。我试着取出“@”和空格之间的字符，搞不定，快疯了