效果預覽：http://www.helloweba.com/demo/cloud-zoom/
源代碼下載：http://pan.baidu.com/s/1eQnadXo
Cloud Zoom是一個圖像放大jQuery插件，效果堪比Magic Zoom。相對於流行jQZoom插件，Cloud Zoom體積小，有更多的功能和更強大的跨瀏覽器兼容性。
特點
兼容大多數瀏覽器，（已經測試通過的瀏覽器有：IE6+, Firefox, Chrome, Opera, Safari）
易於集成的基本有效的HTML。
（精縮）腳本小，只有6Kb。
平滑變焦運動。
畫廊模式。
着色，軟聚焦和內變焦功能。
它是完全免費的。
使用方法
1、加載CSS：
<link href="/styles/cloud-zoom.css" type="text/css" rel="stylesheet" />
2、加載Javascript：
<script type="text/JavaScript" src="/js/jquery.1.4.2.min.js"></script> <script type="text/JavaScript" src="/js/cloud-zoom.1.0.1.min.js"></script>
3、HTML代碼：
<a href='/images/zoomengine/bigimage00.jpg' class='cloud-zoom-gallery' title='Thumbnail 1' rel="useZoom: 'zoom1', smallImage: '/images/zoomengine/smallimage.jpg' "> <img src="/images/zoomengine/tinyimage.jpg" alt = "Thumbnail 1"/></a> <a href='/images/zoomengine/bigimage01.jpg' class='cloud-zoom-gallery' title='Thumbnail 2' rel="useZoom: 'zoom1', smallImage: ' /images/zoomengine/smallimage-1.jpg'"> <img src="/images/zoomengine/tinyimage-1.jpg" alt = "Thumbnail 2"/></a> <a href='/images/zoomengine/bigimage02.jpg' class='cloud-zoom-gallery' title='Thumbnail 3' rel="useZoom: 'zoom1', smallImage: '/images/zoomengine/smallimage-2.jpg' "> <img src="/images/zoomengine/tinyimage-2.jpg" alt = "Thumbnail 3"/></a>
插件參數一覽表
| 參數 | 描述 (from V1.0.0) | 默認值 |
| zoomWidth | 設置縮放窗口的寬度，如果設置為"auto"則窗口寬度與小圖片寬度相等。 | 'auto' |
| zoomHeight | 設置縮放窗口的高度，如果設置為"auto"則窗口高度與小圖片高度相等。 | 'auto' |
| position | 指定縮放窗口相對於小圖片的位置。允許的值是 'left', 'right', 'top', 'bottom', 'inside' ，也可以是專門一個HTML元素的ID放置例如窗口的縮放位置：'element1' | 'right' |
| adjustX | 允許你微調像素的縮放窗口的X位置。 | 0 |
| adjustY | 允許你微調像素的縮放窗口的Y位置。 | 0 |
| tint | 指定覆蓋的小圖片的顏色。顏色應指定十六進制格式，例如'＃aa00aa'。 | false |
| tintOpacity | 指定色彩的透明度，其中0是完全透明的，1是完全不透明。 | 0.5 |
| lensOpacity | 設置鏡頭鼠標指針的透明度，其中0是完全透明的，1是完全不透明。在色彩和軟對焦模式，它將始終是透明的。 | 0.5 |
| softFocus | 適用於一種微妙的模糊效果來的小圖片。設置為true或false。 | false |
| smoothMove | 形象的漂移縮放，數字越高，就越順暢/更輕松進行漂移運動。 1 =不平滑。 | 3 |
| showTitle | 是否顯示圖片的標題. | true |
| titleOpacity | 指定是否顯示標題不透明度，其中0是完全透明的，1是完全不透明。 | 0.5 |