cloud-zoom的例子

<a href="http://blog.51cto.com/attachment/201202/090355776.jpg" target="_blank"></a>

具體的例子請去下載下傳：cloud-zoom例子.rar

部署步驟:

1.    加載jquery-1.5.js （1.4也行）和 cloud-zoom.1.0.2.min.js

2.    加入樣式表(DEMO中&lt;style&gt;部分)

3.    為需要放大預覽效果的縮略圖添加超連結&lt;a&gt;并将類命名為”cloud-zoom” class=”cloud-zoom”

4.    在超連結&lt;a&gt;的rel屬性中加入需要的參數實作不同的效果

5.       例子：

&lt;a href=”images/大圖.jpg” class=”cloud-zoom” rel=”position:’inside’ ,showTitle:false, adjustX:-2, adjustY:-2″&gt;

&lt;img src=”images/縮略圖.jpg” title=”iinterest” /&gt;

&lt;/a&gt;

Cloud Zoom是一個圖像放大jQuery插件，效果堪比Magic Zoom。相對于流行jQZoom插件，Cloud Zoom體積小，有更多的功能和更強大的跨浏覽器相容性。

參數

描述 (from V1.0.0)

預設值

zoomWidth

設定縮放視窗的寬度，如果設定為"auto"則視窗寬度與小圖檔寬度相等。

 'auto'

zoomHeight

設定縮放視窗的高度，如果設定為"auto"則視窗高度與小圖檔高度相等。

position

指定縮放視窗相對于小圖檔的位置。允許的值是 'left', 'right', 'top', 'bottom', 'inside' ，也可以是專門一個HTML元素的ID放置例如視窗的縮放位置：'element1'

 'right'

adjustX

允許你微調像素的縮放視窗的X位置。

adjustY

允許你微調像素的縮放視窗的Y位置。

tint

指定覆寫的小圖檔的顔色。顔色應指定十六進制格式，例如'＃aa00aa'。

 false

tintOpacity

指定色彩的透明度，其中0是完全透明的，1是完全不透明。

 0.5

lensOpacity

設定鏡頭滑鼠指針的透明度，其中0是完全透明的，1是完全不透明。在色彩和軟對焦模式，它将始終是透明的。

softFocus

适用于一種微妙的模糊效果來的小圖檔。設定為true或false。

smoothMove

形象的漂移縮放，數字越高，就越順暢/更輕松進行漂移運動。 1 =不平滑。

 3

showTitle

是否顯示圖檔的标題.

 True

titleOpacity

指定是否顯示标題不透明度，其中0是完全透明的，1是完全不透明。

     本文轉自韓立偉 51CTO部落格，原文連結：http://blog.51cto.com/hanchaohan/788266，如需轉載請自行聯系原作者