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

效果如下：


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

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>JQzoom Demo</title> <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> <a href="http://img.jb51.net/online/jqzoom/demo/kawasakigreen.jpg" class="jqzoom" title="kawasaki" target="_blank" rel="nofollow"> <img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ZpbGVzLmpiNTEubmV0L3VwbG9hZC8yMDA5MDUxMDExNDAyOTk4MS5qcGc=" title="jquery 实现京东商城、凡客商城的图片放大效果_jquery" 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

打包下载地址