首页 > 网页设计

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 

源码包下载:百度网盘

相关合集

  • 购物实惠的软件有哪些?
购物实惠的软件有哪些?

简介:随着社会的不断的进步传统的买东西,都是可以直接在手机上进行购买非常的方便生活,不仅有吃的有喝的还有各种不同种类的生活用品,家电用品等等,本站分享一些比较多人使用的,在上面买东西是非常的实惠价格很便宜还是可以给你保证正品的购物软件推荐。