这是一款jQuery列表图片点击弹出遮罩层图片放大查看效果，支持鼠标滚动图片放大缩小预览效果代码。

使用方法

在页面引入以下jquery.js和zoom.js文件

<script src="jquery.js"></script>
<script src="zoom.js"></script>

点击图片放大遮罩script代码

<script>
        $(function(){
            /*
             smallimg   // 小图
             bigimg  //点击放大的图片
             mask   //黑色遮罩
             */
            var obj = new zoom('mask', 'bigimg','smallimg');
            obj.init();
        })
</script>

Html结构

以下是html代码结构，插入需要显示的页面。

<div class="bigbox"> 
<div class="imgbox"> 
<img src="img/1.jpg" class="smallimg" alt=""> 
</div> 
<div class="imgbox"> 
<img src="img/2.jpg" class="smallimg" alt=""> 
</div> 
<div class="imgbox"> 
<img src="img/3.jpg" class="smallimg" alt=""> 
</div> 
<div class="imgbox"> 
<img src="img/4.jpg" class="smallimg" alt=""> 
</div> 
<div class="imgbox"> 
<img src="img/5.jpg" class="smallimg" alt=""> 
</div> 
<div class="imgbox"> 
<img src="img/6.jpg" class="smallimg" alt=""> 
</div> 
  
</div> 
<img src="" alt="" class="bigimg"> 
<div class="mask"> 
<img src="img/close.png" alt=""> 
</div>