有时候网站上的图片比较小，客户想要看到产品的更多细节，就需要放大图片，我们可以用jQuery插件来实现当鼠标经过图片时，图片可以自动放大，首先我建议先看看 演示 效果，如果可以用到你的网站中，可以下载插件：zoom image

Html文件

<a href=”large.jpg”><img src=”small.jpg” alt=”Small image” /></a>

Css文件
你可以自己定义放大后图片的css样式，这里所演示的样式如下：

#easy_zoom{
width:600px;
height:400px;
border:5px solid #eee;
background:#fff;
color:#333;
position:absolute;
top:15px;
left:400px;
overflow:hidden;
-moz-box-shadow:0 0 10px #555;
-webkit-box-shadow:0 0 10px #555;
box-shadow:0 0 10px #555;
/* vertical and horizontal alignment used for preloader text */
line-height:400px;
text-align:center;
}

jQuery文件

下面是jQuery使用的默认值和说明：

id
默认值： “ easy_zoom ”
新创建的放大图像元素的ID，当然你也可以使用你自己的，但要确保要和你所创建的CSS相对应 。

Parent

默认值： “body”
定义新创建的放大图像元素将被插入的DOM元素，您可以通过编辑这个选项插入到你喜欢的任何地方。

preload
默认值： “Loading… ”
大图片加载前所显示的文字：正在加载。

error
默认值： “There has been a problem with loading the image. ”
若大图片未找到或无法加载时，会出现此错误消息，您可以使用此选项自定义错误消息。

下面是使用一些自定义选项的示例代码：

jQuery(function($){

$(‘a.zoom’).easyZoom({

id: ’imagezoom’,

preload: ’<p class=”preloader”>Loading the image</p>’

parent: ’#container’

});