|  RSS订阅  |  加入收藏

分享一个基于Jquery的图片放大镜效果

基于jquery的图片放大镜,在原图基础上放大的效果,严格意义上的失真放大,不是在缩略图上触发加载原图效果。
摘要

图片放大镜效果一般都使用在商城的产品最终展示页面,通过放大商品的局部,让消费者更加直观的查看商品信息。而通常我们看到的放大镜是在缩略图的上使用放大镜,而加载的图像是原图。这样的放大效果没有失真并且更清晰。而这和物理意义上的放大镜相差甚远。生活上我们使用的放大镜通过是对原物进行放大观看,放大后的效果是失真的。一直需要一个这种接近真实意义的放大镜效果。在网上找到这个基于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


如文章有用,点下广告吧
  Jquery    
转载请注明出处,未经许可禁止商用!
发表评论
*依据《网络安全法》规定,您需实名认证后才能评论!
有演示图片吗?
@银色月航:刚好之前遇到一个项目需要在原图上放大,就去找了一下这个代码。手动尴尬~
记笔记的好习惯真好牛