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，如需转载请自行联系原作者