图片放大镜效果一般都使用在商城的产品最终展示页面,通过放大商品的局部,让消费者更加直观的查看商品信息。而通常我们看到的放大镜是在缩略图的上使用放大镜,而加载的图像是原图。这样的放大效果没有失真并且更清晰。而这和物理意义上的放大镜相差甚远。生活上我们使用的放大镜通过是对原物进行放大观看,放大后的效果是失真的。一直需要一个这种接近真实意义的放大镜效果。在网上找到这个基于Jquery的放大镜效果分享一下。
首先是引入Jquery文件jquery-1.2.6.min.js和CSS样式表。其次在需要放大的图片上添加属性jqimg,属性值和src值一致,也就是在原图上放大的
然后在后面添加Jquery操作代码
$(function(){ $(".jqzoom").jqueryzoom({ xzoom:400, yzoom:400, offset:10, position:"right", preload:1, lens:1 }); })
最后在页面底部引入操控功能代码zzjs.js
具体需要的样式可以自行在样式表中修改,放大尺寸比例可以在操作代码里面自行调整。
最后附上完整的文件压缩包Jquery放大镜.rar