Cloud Zoom是一个图像放大jQuery插件,效果堪比Magic Zoom。相对于流行jQZoom插件,Cloud Zoom体积小,有更多的功能和更强大的跨浏览器兼容性。
特点
兼容大多数浏览器,(已经测试通过的浏览器有:IE6+, Firefox, Chrome, Opera, Safari)
易于集成的基本有效的HTML。
(精缩)脚本小,只有6Kb。
平滑变焦运动。
画廊模式。
着色,软聚焦和内变焦功能。
它是完全免费的。
使用方法
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/zoomengine/bigimage00.jpg' class='cloud-zoom-gallery' title='Thumbnail 1'
rel="useZoom: 'zoom1', smallImage: '/images/zoomengine/smallimage.jpg' ">
<img src="/images/zoomengine/tinyimage.jpg" alt = "Thumbnail 1"/></a>
<a href='/images/zoomengine/bigimage01.jpg' class='cloud-zoom-gallery' title='Thumbnail 2'
rel="useZoom: 'zoom1', smallImage: ' /images/zoomengine/smallimage-1.jpg'">
<img src="/images/zoomengine/tinyimage-1.jpg" alt = "Thumbnail 2"/></a>
<a href='/images/zoomengine/bigimage02.jpg' class='cloud-zoom-gallery' title='Thumbnail 3'
rel="useZoom: 'zoom1', smallImage: '/images/zoomengine/smallimage-2.jpg' ">
<img src="/images/zoomengine/tinyimage-2.jpg" alt = "Thumbnail 3"/></a>
插件参数一览表
参数 |
描述 (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放大镜特效CloudZoomV3.1破解版 适用于jQuery1.9.1及以上版本,以下的版本我没测试 和另外个破解版相比,直接去除了if判断模块,用Uglify压缩了个cloud-zoom.min.js方便大家使用。另外附加了个参数说明.jpg...
利用cloud-zoom 实现图片放大镜效果
cloud zoom.js商品图片放大镜效果插件cloud zoom.js商品图片放大镜效果插件
jquery放大镜效果 鼠标移到图片放大 CloudZoom 宝贝详情图片放大查看
Cloud Zoom V3.1 破解版 JQ图片放大镜 更酷更炫
cloud zoom.js商品图片放大镜插件
cloudzoom很给力的图片放大镜 (jquery插件),用过都知道,移到大图,缓缓出来小图,交互效果比较好。
CloudZoom 是一个对图片进行局部放大的 jQuery 插件,适用于网上购物网站,例如:将其应用在产品列表,方便访客查看商品图片,和以前我们所说的图片放大镜是一样的例子。
Cloud Zoom is a popular fly-out jQuery image zoom plugin.jQuery图像缩放插件
zoomIt放大镜.zip
含多款图片放大镜,内含6种效果,非常好用,大家可以下 载试试
这是一款使用Cloud Zoom和Fancybox制作的jQuery迷你型幻灯片插件。这个jQuery幻灯片非常小,用户用鼠标放到幻灯片上时,就会出现图片放大的放大镜效果。
Cloud Zoom V1.0.2图像局部放大插件 图片放大镜效果JS代码,图片放大镜JS特效代码。