JQzoom 类似淘宝商品放大镜效果插件

JQzoom  类似淘宝商品放大镜效果插件257
很强大的jquery插件,有6种效果,浏览器兼容性很好
引用js和css
<script src="js/jquery-1.5.js" type="text/javascript"></script>
    <script src="js/jquery.jqzoom-core.js" type="text/javascript"></script>
    <link rel="stylesheet" href="css/jquery.jqzoom.css" type="text/css">
HTML
  <div class="clearfix">
            <ul id="thumblist" class="clearfix">
                <li><a class="zoomThumbActive" href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small1.jpg',largeimage: './imgProd/triumph_big1.jpg'}">
                    <img src='imgProd/thumbs/triumph_thumb1.jpg'></a></li>
                <li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small2.jpg',largeimage: './imgProd/triumph_big2.jpg'}">
                    <img src='imgProd/thumbs/triumph_thumb2.jpg'></a></li>
                <li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small3.jpg',largeimage: './imgProd/triumph_big3.jpg'}">
                    <img src='imgProd/thumbs/triumph_thumb3.jpg'></a></li>
            </ul>
        </div>
JS调用
 $(document).ready(function () {
            $('.jqzoom').jqzoom({
                zoomType: 'reverse',
                lens: true,
                preloadImages: false,
                alwaysOn: false
            });
        });

也许你还喜欢