搜索:
首页 >> 下载中心 >> JavaScript源码 >> jquery新浪微博图片放大效果源码[artZoom.js]

jquery新浪微博图片放大效果源码[artZoom.js]

2010-6-21 作者:唐 斌 来源:planeart.cn 网友评论投递文章

我点击新浪微博缩略图的时候会快速的置换一张大图,并且鼠标会显示放大或者缩小的指针,新浪前端工程师吧视口的大图片都预加载了,所以点击缩略图后替换大图的过程很爽快(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多一点]

源码:

[提示:你可先修改部分代码,再按运行]

artzoom.js下载:artZoom.js.rar (2.00 KB)

Tags:微薄  图片放大  源码 
站长工具
友情链接批量查询:
相关文章
loading 请稍等,评论加载中...

学习Asp到Asp之家(Aspxhome.com)

闽ICP备09044667号-4