产品类图片放大镜的效果

体验效果

按上次博文的计划，昨天写了下关于电商类的网站常见的图片放大镜效果。

关于特效书写的过程，大致有这么几个关键点，一是：布局实现方式及定位规划；二是图像比例换算及显示尺寸计算。

关于布局是用了很基础两个模块，打开demo页可以看见一个主要的放大镜的效果和tab标签。关于tab标签的实现方式有很多种，这里小剧稍稍偷了点懒，只用了一个img标签来显示不同的图片。

在切换过程中因为牵涉到比例换算，这里小剧用了js的image对象来预加载图像。这里的比例主要有这么几个的关系，a：【原图的尺寸】、b：【微缩图的尺寸】、c：【预览框的尺寸】、d：【放大镜（就是跟随鼠标的白色透明块）的尺寸】，无论什么样的图像和外框，它们四者始终保持【a/b=c/d】的关系，表现在js计算过程中就是四者对应的宽度和高度上。

在预览过程中有个小细节是小剧开始没有预料到的，就是鼠标的位置，因为正常计算始终是以预览框左上角作为起点，然而这样的布局始终有点怪怪的感觉，因此就有了把预览框与鼠标点的位置修正的这一步。

关于具体实现，一百位前端会有一百种书写方式，这里小剧就提到这儿。

其实这个功能配合后端做起来是很有意思的，因为你可以对它进行改造，加上缩放功能，利用后端的裁图功能做出图像裁切模块。目前常见的社区类网站的头像裁切要么是通过flash的方式实现，要么就是我刚刚提到的思路。

PS：时间的确是靠自己有意识的去挤出来的，强迫自己去完成一个任务的确有点幸苦，但始终会有收获，恭喜，第一篇文章的计划圆满完成！