cloudzoom.js,cloudzoomjs 多個切換

本文目錄一覽：

1、jquery.zoom.js怎麼做相對位置
2、js cloudzoom怎麼添加雙擊事件？
3、如何初始化cloud-zoom插件

jquery.zoom.js怎麼做相對位置

jQuery Cloud Zoom：圖片放大鏡插件我愛模板推薦

jQuery Cloud Zoom：圖片放大鏡插件。想要類似淘寶、京東產品展示圖片放大效果么，Cloud Zoom是一款不錯的選擇。它相對於Magic Zoom，體積更小，只有6KB，而且免費，效果卻並不比它差；而與jQZoom插件比較，它體積也小了不少，並且兼容性更強，就目前測試的瀏覽器看，完美兼容IE6+, Firefox, Chrome, Opera, Safari。它還有着色，軟聚焦和內變焦功能。總之很強大，誰用誰知道。

使用方法：

1、在head引入my.css文件

link rel=”stylesheet” type=”text/css” href=”cloud-zoom.css” /

script type=”text/javascript” src=”/jquery-1.8.3.min.js”/script

script type=”text/javascript” src=”cloud-zoom.1.0.2.min.js”/script

2、在body引入下面的代碼：

a class=”cloud-zoom” id=”zoom1″ href=”images/bigimage00.jpg” rel=”adjustX: 10, adjustY:-4, softFocus:true”img src=”images/smallimage.jpg” title=”Optional title display” alt=”” //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″//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″//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″//a

3、參數說明：

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

js cloudzoom怎麼添加雙擊事件？

① 首先，JavaScript事件中是有雙擊事件的：就是 ondblclick；

② 例子：

var div = document.getElementById(“box”);

div.addEventListener(“dblclick”, function() {

……

});

或者

div.ondblclick = function() {

……

};

以上都是匿名函數的寫法。

如何初始化cloud-zoom插件