仿淘宝图片放大器

文章目录

原理

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

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

<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});
});