jQuery Cloud Zoom：图片放大镜插件
- 作者：网页模板
- 大小：0.285MB
- 点击次数：
- 发布时间：2014-07-02 15:47
特效介绍
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="http://www.5imoban.net/download/jquery/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 |
|||
- 本文标签：
- jQuery Cloud Zoom,jQuery图片放大镜
