仿淘宝图片放大器

文章目录
  1. 1. 原理
  2. 2. 代码
  3. 3. 参考文档

原理

两个盒子,盒子1放小图片,盒子2放对应的大图片。盒子1里的图片正常显示,盒子2里的图片隐藏。在盒子1的图片标签中,加入大图的数据链接。当鼠标在盒子1上移动时,通过鼠标在盒子1的位置计算出盒子2中应该显示的大图的部分。

以下代码中,利用到了jquery.jqzoom.js插件。

代码

1
2
3
4
5
<div id="preview" class="spec-preview"> 
<span class="jqzoom">
<img jqimg="images/b1.jpg" src="images/s1.jpg" />
</span>
</div>
1
2
3
$(function(){
$(".jqzoom").jqueryzoom({xzoom:380,yzoom:380});
});

参考文档

jquery.jqzoom.js图片放大镜
http://www.cnblogs.com/sydeveloper/p/3796330.html

ImageZoom 图片放大效果
http://www.cnblogs.com/cloudgamer/archive/ImageZoom.html

jQuery-实现图片的放大镜显示效果

jquery插件 放大镜
http://www.jq-school.com/Article.aspx?kid=41

jQzoom简介
http://www.oschina.net/p/jqzoom?fromerr=tUayHgqO