将鼠标移动到一张图片上来的时候,放大该图片的某些细节.
<html> <head> <script src="../js/jquery-1.6.js" type="text/javascript"></script> <script src="../js/jquery.jqzoom-core-pack.js" type="text/javascript"></script> <link rel="stylesheet" href="../css/jquery.jqzoom.css" type="text/css"> </head> <body> <a href="1.jpg" class="jqzoom" rel='gal1' style="" title=""> <img src="1.jpg" border="0" style="border: 1px solid #666;" title="" width="100px" height="100px"> </a> </body> <script type="text/javascript"> $(document).ready(function() { $('.jqzoom').jqzoom({ zoomType: 'standard', lens:true, preloadImages: false, alwaysOn:false }); }); </script> </html>
如果要做成商城产品图片预览的效果,当点击下面的图片时,上面的图片跟着发生变化.
<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>
需要设置href和rel才会动态的放大当前展示的图片。 要求jquery-1.6.js，jquery-1.9.1不支持。