文章来源：http://www.imtr.cn/html/n173.html
特点：
1、兼容大多数浏览器(测试 IE6+, Firefox, Chrome, Opera, Safari)
2、6KB（缩小的）脚本
3、色调、柔焦和内变焦功能
4、正常降级，使用Javascript关闭特效
首先引入jquery-1.8.2.min.js文件【点击下载】，如果你的网站已经加载了jquery-1.8.2.min.js文件或更高的版本，忽略此步。
然后引入特效所需要的JS文件【点击下载】(不能引入到jquery的前面)，就像这样：
<script type="text/javascript" src="jquery-1.8.2.min.js"></script> <script type="text/javascript" src="zoom.min.js"></script>
CSS代码如下：
<style type="text/css">
.zoom-desc{float:left;margin-left:10px;width:310px;margin-bottom:20px;}
.zoom-small-image{float:left;margin-bottom:20px;}
.zoom-tiny-image{border:1px solid #CCC;margin:0px;}
.zoom-tiny-image:hover{border:1px solid #C00;}
.cloud-zoom{border:2px solid #CCC;}
.cloud-zoom-big{border:4px solid #ccc;overflow:hidden;}
.cloud-zoom-lens{border:4px solid #888;margin:-4px;background-color:#fff;cursor:move;}
.cloud-zoom-gallery{text-decoration:none!important;}
</style>HTML代码如下：
<div class="zoom-small-image"> <a href="默认图片地址" class="cloud-zoom" id="zoom1" rel="adjustX:10, adjustY:-4"> <img src="默认图片地址" width="260" height="260"/> </a> <div style="padding:5px;"> <a href="图片地址-1" class="cloud-zoom-gallery" rel="useZoom:'zoom1',smallImage: '图片地址-1'"> <img class="zoom-tiny-image" src="图片地址-1" width="50" height="50"> </a> <a href="图片地址-2" class="cloud-zoom-gallery" rel="useZoom:'zoom1',smallImage: '图片地址-2'"> <img class="zoom-tiny-image" src="图片地址-2" width="50" height="50"> </a> <a href="图片地址-3" class="cloud-zoom-gallery" rel="useZoom:'zoom1',smallImage: '图片地址-3'"> <img class="zoom-tiny-image" src="图片地址-3" width="50" height="50"> </a> <a href="图片地址-4" class="cloud-zoom-gallery" rel="useZoom:'zoom1',smallImage: '图片地址-4'"> <img class="zoom-tiny-image" src="图片地址-4" width="50" height="50"> </a> </div> </div>
原文地址：http://www.imtr.cn/html/n173.html