jquery.zoom.js放大镜实例

欢迎加入qq群(IT-程序猿-技术交流群)：757345416

效果图如下：

下面直接上代码：

1、引入jquery.js、jquery.zoom.js

<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-zoom/1.7.21/jquery.zoom.min.js"></script>

2、html代码

<div id="zoom" class="zoom">
        <img src="1.jpg"/>
</div>
<div id="target"></div>

3、css代码

        .zoom{
            display: inline-block;
            cursor:pointer;
        }
        img{
            width: 300px;
            height: 300px;
        }
        #target{
            position: absolute;
            left: 300px;
            top: 0;
            height: 500px;
            width: 500px;
            border: 1px solid #666;
            visibility: hidden;
        }

4、js代码

    <script type="text/javascript">
        $('#zoom').zoom({
            target: '#target',
            magnify:1.2,
            onZoomIn: function(){
                $('#target').css('visibility', 'visible');
            },
            onZoomOut: function(){
                $('#target').css('visibility', 'hidden');
            }
        });
    </script>

文章到此结束，希望对你的学习有帮助！