jquery 实现京东商城、凡客商城的图片放大效果_jquery

效果如下：


看下我们的演示，“运行代码”后请刷新一次：

<title>JQzoom Demo</title> <script src="http://img.jb51.net/online/jqzoom/js/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="http://img.jb51.net/online/jqzoom/js/jqzoom.pack.1.0.1.js" type="text/javascript"></script> <link rel="stylesheet" href="http://img.jb51.net/online/jqzoom/css/jqzoom.css" type="text/css"> <style type> div.notes{ font-size:12px; } div.notes a{ color:#990000; } </style> <script type="text/javascript"> $(function() { $(".jqzoom").jqzoom(); }); </script> <a href="http://img.jb51.net/online/jqzoom/demo/kawasakigreen.jpg" class="jqzoom" title="kawasaki"> <img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090510114029981.jpg" class="lazy" title="kawasakigreen" alt="jquery 实现京东商城、凡客商城的图片放大效果_jquery" > </a>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

要实现这样的效果，只需要在需要这样效果的页面的区域加入：

复制代码 代码如下:

而对于需要采用该效果的图片：

复制代码 代码如下:

class="jqzoom"是关键。
而其属性设置包括：

您也可以直接查看原文章：http://www.mind-projects.it/projects/jqzoom/index.php#examples
您也许有兴趣看下作者精心准备的例子：http://www.mind-projects.it/projects/jqzoom/demos.php#demo1

打包下载地址