jQuery插件Cloud Zoom

共计 1421 个字符，预计需要花费 4 分钟才能阅读完成。

类似上图的效果：

图片放大镜效果是一种不错的效果，多应用于电子商务、图片展示等网站，给用户带来更好的体验。实现这种效果的代码不少，今天要给大家介绍的是 Cloud Zoom，它是 jQuery 的一个插件。和其他产品相比，Cloud Zoom 具有代码少、功能多、兼容性好等特点，并且支持 Tint、 Soft Focus 和 Inner 三种放大镜模式。

Cloud Zoom 不需要再在 js 代码里调用了，只需要给 a 标签加上 class 为 “cloud-zoom” 就可以实现调用：

不过要注意顺序哦，必须是：

[php]
<script type="text/javascript" src="jquery.min.js"></script>
<script>

$(function(){
$(‘.cloud-zoom’).attr(‘rel’);
})
</script>
<script type="text/javascript" src="includes/templates/template_default/jscript/cloud-zoom.1.0.2.min.js"></script>
<a class="cloud-zoom" id="zoom1" href="<?php echo $products_image_medium;?>" rel="adjustX:10, adjustY:-4"><?php echo "<img src=’".$products_image_medium."’ title=’".$products_name."’ width=’400px’/>" ?></a>
[/php]

只加一个 class 效果是默认的，想要其他效果的话，需要给 a 标签的 rel 属性上加上一定的值，具体的值如下：

另外要注意的是：

• rel 属性中涉及到数值的都不要单位，否则插件则运行不了
• rel 的最后一个属性值后面不要逗号，否则 IE6 、IE7 下插件运行不了

最后，附上此插件的主页地址：http://www.professorcloud.com/mainsite/cloud-zoom.htm，里面也有相关说明。