图片放大镜效果

在详细页(detail.html)上将完成如下功能。

• 产品图片放大镜效果。
• 产品图片遮罩层效果。
• 单击产品小图片切换大图。
• 产品属性介绍之类的选项卡。
• 右侧产品颜色切换。
• 右侧产品尺寸切换。
• 右侧产品数量和价格联动。
• 右侧给产品评分的效果。
• 右侧放入购物车。

接下来就用jQuery逐步完成这些效果。

当用户移动光标到产品图片上时，会放大产品局部区域，以方便用户查看产品细节。这种放大镜效果在网店中是常用特效，演示效果如图24.17所示。

图1 产品图片放大效果

如果亲自动手实现这个效果，或许比较麻烦，不过可以借助插件来快速实现。插件是jQuery的特色之一，访问jQuery官网查找一下，看是否有类似的插件，本例使用的是名为jqzoom的插件，它很适合本例设计需求。

【操作步骤】

第1步，在官网找到jquery.jqzoom.js，并下载到本地，然后在详细页中把它引入到网页中，代码如下所示：

<!-- 产品缩略图插件 -->
<script src="scripts/jquery.jqzoom.js" type="text/javascript"></script>

第2步，新建JavaScript文件，保存为use_jqzoom.js。查看官方网站的API使用说明，可以使用如下代码调用jqzoom。

/*使用jqzoom*/
$(function(){
	$('.jqzoom').jqzoom({
		zoomType: 'standard',
		lens:true,
		preloadImages: false,
		alwaysOn:false,
		zoomWidth: 340,
		zoomHeight: 340,
		xOffset:10,
		yOffset:0,
		position:'right'
    });
});

第3步，将上面代码放入use_jqzoom.js文件里，然后在网页文档中引入。

<script src="scripts/use_jqzoom.js" type="text/javascript"></script>

第4步，在相应的HTML代码中添加属性。为元素添加href属性，设置它的值指向产品对应的rel属性，它是小图片切换为大图片的“钩子”，代码如下所示。

<a href="images/pro_img/blue_one_big.jpg" class="jqzoom" rel='gal1' title="免烫高支棉条纹衬衣" > 
    <img src="images/pro_img/blue_one_small.jpg" title="免烫高支棉条纹衬衣" alt="免烫高支棉条纹衬衣" id="bigImg" /> 
</a>