Life Studio » MagicThumb http://wange.im My Life, My Studio... Fri, 20 Jan 2012 01:49:17 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 JS 实现放大镜产品展示效果（三） http://wange.im/enlarge-show-effects-with-js-3.html http://wange.im/enlarge-show-effects-with-js-3.html#comments Thu, 04 Feb 2010 09:20:51 +0000 万戈 http://wange.im/?p=2648 前段时间写过两篇关于用 JS 实现放大镜产品展示效果的文章（#1、#2），因为反应比较冷淡，两篇回复加起来也只有160+留言，所以感觉这样的效果关心的人不是很多，也可能是在 WordPress 中此效果可以用插件实现，这种原生态的方法也就没人关注了，就这样，写系列三的计划就此打消。不过今天收到一封邮件，来自于某机械类产品的企业，貌似对 JS 实现放大镜产品展示的效果挺感兴趣，有意将其应用于企业网站展示给客户，并且还发给我一个 MagicThumb 的效果图请我破解。

MagicThumb 和我上两次介绍的 MagicZoom 份属同门，都是 Magic Toolbox 出品的经典作品，而 MagicThumb 比 MagicZoom 的功能要强大的多，可以设置背景、位置、颜色、大小、时间等近30个参数，可想而知，MagicThumb 的效果组合变化之多。只是唯一不足的是 MagicThumb 与 MagicZoom 一样，在图片展示的右下脚有 Please upgrade to full version of Magic Thumb™ 的字样，很是碍眼啊，只有交了钱才能去掉这行水印文字，我想这也就是那家企业发邮件找我的目的。

其实我对 JS 几乎是一窍不通，要我破解去掉这行水印还真是有些麻烦，而且我解压此 JS 后发现这个 MagicThumb 还是加了密的，想想也是，人家可是收钱的，岂能这么容易就去除呢？不过我还是用了比较折衷的方法干掉了这行水印，那就是用我相对比较熟悉的 CSS，我在 JS 中找到其相应的 CSS 样式，将其改为 display:none; 这样就 OK 了。

完整的未破解示例可以去官方页面下载，下面附上已经破解水印文字的 MagicThumb 的 JS 文件：点此下载

说了半天，还没有展示 MagicThumb 的效果到底如何，我把官方示例的文件破解后上传到自己的主机上了，效果点此链接：http://wange.im/magicthumb

]]> http://wange.im/enlarge-show-effects-with-js-3.html/feed 144