jqzoom图片放大镜效果

效果图片

样式：

<style type="text/css">
        .jqzoom
        {
            float: left;
            border: none;
            position: relative;
            padding: 0px;
            cursor: pointer;
            margin: 2px 6px;
            display: block;
        }
        .zoomdiv
        {
            z-index: 100;
            position: absolute;
            top: 0px;
            left: 0px;
            width: 300px;
            height: 300px;
            background: #ffffff;
            border: 1px solid #CCCCCC;
            display: none;
            text-align: center;
            overflow: hidden;
        }
        .jqZoomPup
        {
            z-index: 10;
            visibility: hidden;
            position: absolute;
            top: 0px;
            left: 0px;
            width: 20px;
            height: 20px;
            border: 1px solid #aaa;
            background: #ffffff url(../images/zoom.gif) 50% top no-repeat;
            opacity: 0.5;
            -moz-opacity: 0.5;
            -khtml-opacity: 0.5;
            filter: alpha(Opacity=50);
        }
    </style>

2.还要引入js库

    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>

  <script type="text/javascript">
        $(document).ready(function() { $(".jqzoom").jqueryzoom({ xzoom: 300, yzoom: 300 }); });
    </script>

3.测试的代码：

 <!--测试放大镜效果-->
    <div style="height: 310px; text-align: center;">
        <span class="jqzoom">
            <img jqimg="watermark.png" src="watermark.png" /></span>
    </div>