在这里下载源文件: https://github.com/mindprojects/jqzoom
引入javascript文件
<!-- CSS files --> <link rel="stylesheet" type="text/css" href="jquery.jqzoom.css"> <!-- Js Files --> <script type='text/javascript' src='jquery-1.5.xx.js'></script> <script type='text/javascript' src='jquery.jqzoom-core.js'></script>
<!-- you need to specify the HTML anchor element,that is going to generate --> <!-- the zoom revealing a portion of the enlarged image. --> <a href="images/BIGIMAGE.JPG" class="MYCLASS" title="MYTITLE"> <img src="images/SMALLIMAGE.JPG" title="IMAGE TITLE"> </a>
<script type="text/javascript"> $(document).ready(function() { /* simple call */ $('.MYCLASS').jqzoom(); /* more complex call*/ var options = { zoomType: 'standard', lens:true, preloadImages: true, alwaysOn:false, zoomWidth: 300, zoomHeight: 250, xOffset:90, yOffset:30, position:'left' //...MORE OPTIONS }; $('.MYCLASS').jqzoom(options); }); </script>
可选参数: