首页 > 网页设计

jquery实现图片放大镜效果

发布时间:2011-12-15 12:51:11 来源:星知苑 作者:星之宇

在一些大型的购物网站 你经常可以看到这个效果,通过放大镜效果,可以把一个小的图片的某一部位放大到清晰可见。 比如淘宝网的商品局部放大效果。

1.首先你必须要有2张图片,一张缩略图和一张高清晰的图片。 然后当鼠标在缩略图里移动时,通过计算鼠标在缩略图里的位置和比例。最后通过比例就可以得出大图要显示的部分。

2.小图中的半透明层[break]
当鼠标滑入小图片时,我们需要添加一个半透明层用来显示当前鼠标框住的区域。
有3种状态:
(1)鼠标滑入
(2)鼠标滑动
(3)鼠标滑出
滑入时,我们需要给半透明层定位,并马上显示出层。通过给元素绑定mousemove事件。
滑动时,需要给透明层实时定位,在计算定位时,要注意半透明层不超出图片边界。
同时在mousemove时,添加了一个setTimeout,减少资源占用。
滑出后,隐藏半透明层,并把mousemove解除绑定,减少资源占用.
这一步最关键的就是,滑动时中心点和坐标的计算。

3.显示放大的图
在刚才3种状态上,在添加点内容。
鼠标滑入时,需要添加大图的显示。
鼠标滑动时,需要根据鼠标当前的位置在小图中的比例,然后把比例*大图的宽度高度 得到大图显示的位置。
鼠标滑出后,需要隐藏大图。
这一步最关键的就是,滑动时比例的计算。

效果图:

点击查看原图

在线完整展示http://demo.myxzy.com/jqzoom/index.htm 

源码包下载:百度网盘

相关合集

  • 最好玩的魔幻手游推荐
最好玩的魔幻手游推荐

简介:游戏画面不管是声效还是效果上都是有着非常精良的制作,还有插入了各种CG动画,这样的大型的魔幻史诗级手游也是超多的玩家喜欢,就是需要手机有着超高的配置才可以享受到那种画质效果,这里也是整理了在近年来最火爆的最棒的手游,让玩家可以随时进入到各种魔幻大陆中尽情的冒险升级打怪。