jQuery点击图片放大查看遮罩效果代码

jQuery点击图片放大查看遮罩效果代码

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

使用方法
在页面引入以下jquery.js和zoom.js文件

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

点击图片放大遮罩script代码

1
2
3
4
5
6
7
8
9
10
11
<script>
        $(function(){
            /*
             smallimg   // 小图
             bigimg  //点击放大的图片
             mask   //黑色遮罩
             */

            var obj = new zoom('mask', 'bigimg','smallimg');
            obj.init();
        })
</script>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<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>

文件信息:

    1

    发表评论