1. 原理
两个盒子,盒子1放小图片,盒子2放对应的大图片。盒子1里的图片正常显示,盒子2里的图片隐藏。在盒子1的图片标签中,加入大图的数据链接。当鼠标在盒子1上移动时,通过鼠标在盒子1的位置计算出盒子2中应该显示的大图的部分。
以下代码中,利用到了jquery.jqzoom.js插件。
2. 代码
1 | <div id="preview" class="spec-preview"> |
1 | $(function(){ |
3. 参考文档
jquery.jqzoom.js图片放大镜
http://www.cnblogs.com/sydeveloper/p/3796330.html
ImageZoom 图片放大效果
http://www.cnblogs.com/cloudgamer/archive/ImageZoom.html
jquery插件 放大镜
http://www.jq-school.com/Article.aspx?kid=41