产品类图片放大镜的效果

时间:2013-4-14 作者:剧中人

体验效果

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

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

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

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

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

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

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


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