圖片放大鏡——jQuery外掛程式Cloud Zoom

標籤：style   blog   http   color   io   os   使用   java   ar   

：cloud_zoom.rar

圖片放大鏡效果是一種不錯的效果，多應用於電子商務、圖片展示等網站，給使用者帶來更好的體驗。實現這種效果的代碼不少，今天要給大家介紹的是 Cloud Zoom，它是 jQuery 的一個外掛程式。和其他產品相比，Cloud Zoom 具有代碼少、功能多、相容性好等特點，並且支援 Tint、 Soft Focus 和 Inner 三种放大鏡模式。
在a標籤中的rel屬性設定不同的屬性值，可以顯示不同效果哦：
1.預設模式：
rel="adjustX: 10, adjustY:-4"

2.色彩設定
參數設定：
rel="tint: ‘#ff0000‘,tintOpacity:0.5 ,smoothMove:5,zoomWidth:480, adjustY:-4, adjustX:10"

3.在小圖片裡放大
參數設定：
rel="position: ‘inside‘ , showTitle: false, adjustX:-4, adjustY:-4"

4.設定縮放視窗位置
參數設定：
rel="softFocus: true, position:‘a‘,smoothMove:2"

使用方法：
與其他外掛程式不一樣，Cloud Zoom 不需要再在 js 代碼裡調用了，只需要給 a 標籤加上 class 為 “cloud-zoom” 就可以實現調用。
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/bigimage00.jpg‘ class = ‘cloud-zoom‘ id=‘zoom1‘            rel="adjustX: 10, adjustY:-4">            <img src="images/smallimage.jpg" alt=‘‘ title="Main title of image 1" />        </a>                <a href=‘images/bigimage00.jpg‘ class=‘cloud-zoom-gallery‘ title=‘Thumbnail 1‘            rel="useZoom: ‘zoom1‘, smallImage: ‘images/smallimage.jpg‘ ">        <img src="images/tinyimage.jpg" alt = "Thumbnail 1" title="Main title of image 1"/></a>                <a href=‘images/bigimage01.jpg‘ class=‘cloud-zoom-gallery‘ title=‘Thumbnail 2‘            rel="useZoom: ‘zoom1‘, smallImage: ‘ images/smallimage-1.jpg‘">        <img src="images/tinyimage-1.jpg" alt = "Thumbnail 2" title="Main title of image 2"/></a>                                  <a href=‘images/bigimage02.jpg‘ class=‘cloud-zoom-gallery‘ title=‘Thumbnail 3‘            rel="useZoom: ‘zoom1‘, smallImage: ‘images/smallimage-2.jpg‘ ">        <img src="images/tinyimage-2.jpg" alt = "Thumbnail 3" title="Main title of image 3"/></a>

只加一個 class 效果是預設的，想要其他效果的話，需要給 a 標籤的 rel 屬性上加上一定的值，具體的值如下：

參數	描述 (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

圖片放大鏡——jQuery外掛程式Cloud Zoom