<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript" src="jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="cloud-zoom.css"/>
<script type="text/javascript" src="cloud-zoom.1.0.2.js"></script>
<style type="text/css">
.cloud-zoom img { border:0 none;}
</style>
</head>
<body>
<a href="01_l.jpg" class="cloud-zoom" rel="adjustX:12,zoomWidth:300,zoomHeight:300"><img src="01_l.jpg" alt="" width="200px" height="200px"/></a>
<script type="text/javascript" src="http://www.17css.com/works/tongji.js"></script>
</body>
</html>
详细说明：
图片放大镜效果是一种不错的效果，多应用于电子商务、图片展示等网站，给用户带来更好的体验。实现这种效果的代码不少，今天要给大家介绍的是 Cloud Zoom，它是 jQuery 的一个插件。和其他产品相比，Cloud Zoom 具有代码少、功能多、兼容性好等特点，并且支持 Tint、 Soft Focus 和 Inner 三种放大镜模式。
目前，Cloud Zoom 的最新版本是 1.0.2，我们就此版本为例（1.0.2与之前版本有所不同），来看看 Cloud Zoom 是如何工作的。首先，当然是引入插件以及附带的 CSS 文件，当然，你喜欢的话，样式可以自己编写。然后编写 XHTML 代码：
<a href="http://www.17css.com/works/10/B/images/bigimage03.jpg" class="cloud-zoom">
<img src="http://www.17css.com/works/10/B/images//smallimage-3.jpg" alt="" />
</a>
与其他插件不一样，Cloud Zoom 不需要再在 js 代码里调用了，只需要给 a 标签加上 class 为 “cloud-zoom” 就可以实现调用。看看上边代码产生的效果吧，查看Demo1
只加一个 class 效果是默认的，想要其他效果的话，需要给 a 标签的 rel 属性上加上一定的值，具体的值如下：
参数
描述
默认值
| zoomWidth |
放大镜窗口的宽度，如果是默认值，则和小图片一样。不需要单位，有单位会出错 |
'auto' |
| zoomHeight |
放大镜窗口的高度，如果是默认值，则和小图片一样。不需要单位，有单位会出错 |
'auto' |
| position |
放大镜窗口的位置，可选 left 、 right 、 top 、 bottom ，也可以指定某个 ID，如 position: 'element1' |
'right' |
| adjustX |
距离小图片的水平位置。不需要单位，有单位会出错 |
0 |
| adjustY |
距离小图片的垂直位置。不需要单位，有单位会出错 |
0 |
| tint |
非放大区域的颜色，必须是十六进制颜色，如 '#aa00aa',不能和 softFocus 一起使用 |
false |
| tintOpacity |
不透明度，0 是完全透明，1 是完全不透明 |
0.5 |
| lensOpacity |
镜头鼠标指针不透明度，0 是完全透明，1 是完全不透明，在 tint 和 softFocus 模式下始终透明 |
0.5 |
| softFocus |
微微的模糊效果，可选 true 或 false，不能和 tint 一起使用 |
false |
| smoothMove |
放大区域图片移动的平滑度，数字越高越平滑，为 1 则不平滑 |
3 |
| showTitle |
显示图片标题，可选 true 或 false |
true |
| titleOpacity |
标题不透明度，0 是完全透明，1 是完全不透明 |
0.5 |
再看几个加上了非默认 rel 属性值的例子吧，Demo2 Demo3 Demo4
如果你认为要在 a 标签里加上 rel 属性不好，没做做到 “js” 与 XTHML 分离的话，那就把他们分离，把工作交给 js 吧：
$(function(){
$('.cloud-zoom').attr('rel','tint:"#f00"');
})
不过要注意顺序哦，必须是：
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('.cloud-zoom').attr('rel','tint:"#f00"');
})
</script>
<script type="text/javascript" src="cloud-zoom.1.0.2.min.js"></script>
因为 Cloud Zoom 在加载的时候必须得到相应的 rel 属性值，如果之后再写上 rel 属性值，人家可不会再去读取哦。
至于到底是把 rel 写在 XHTML 里还是 js 里，就看个人喜好吧，作者是把 rel 直接写在 XHTML 里的。
另外要注意的是：
- rel 属性中涉及到数值的都不要单位，否则插件则运行不了
- rel 的最后一个属性值后面不要逗号，否则 IE6 、IE7 下插件运行不了
最后，附上此插件的主页地址：http://www.professorcloud.com/mainsite/cloud-zoom.htm，里面也有相关说明。
分享到：
相关推荐
jQuery放大镜特效CloudZoomV...和另外个破解版相比，直接去除了if判断模块，用Uglify压缩了个cloud-zoom.min.js方便大家使用。另外附加了个参数说明.jpg方便大家查阅用法 破解版出自网络，我重新打包制作方便大家！！！
在本文中，我们将深入探讨如何使用jQuery插件Cloud-Zoom来实现图片的局部放大显示效果。Cloud-Zoom是一款强大的jQuery插件，它为网站的图片查看功能提供了丰富的交互体验，尤其是对于电商网站上的商品展示非常实用。...
CloudZoom是一款广受欢迎的jQuery插件，主要用于实现网页上的图片放大镜效果，为用户提供更加细腻的查看产品细节的体验。这个插件以其优秀的交互性和流畅的动画效果在Web开发领域得到了广泛应用。 首先，CloudZoom...
"jquery图片放大镜效果鼠标移到图片放大CloudZoom"是基于jQuery实现的一种此类效果的插件。jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互，使得创建复杂的网页交互变得...
- `cloudzoom.css`：这是插件的样式表文件，包含放大镜的样式定义，如放大镜的形状、位置、透明度等。 - `index.html`：示例页面，展示了如何在HTML中嵌入Cloud Zoom.js并调用其功能。 - `jquery.min.js`：Cloud ...
Cloud Zoom是一款专为网页设计者打造的高效图片放大jQuery插件。它以其轻量级的特性，丰富的功能和卓越的跨浏览器兼容性，在众多同类插件中脱颖而出，尤其与Magic Zoom有类似的视觉效果。在本文中，我们将深入探讨...
在本文中，我们将深入探讨如何使用Cloud-Zoom jQuery插件来实现图片的局部放大效果，类似于Mac OS X Lion中的lanchPad特效。Cloud-Zoom是一款功能强大的jQuery插件，它能够在用户鼠标悬停在图像上时，提供一个高质量...
jQuery.jQueryzoom则是jQuery的一个扩展，它添加了特定的功能，即在鼠标悬停在图片上时，能够显示图片的放大视图，从而让用户能更清晰地看到图片的细节。 使用jQuery.jQueryzoom的基本步骤如下： 1. **引入依赖**...
本文将详细解析"Jquery相册鼠标经过放大图片插件实例源码"这一主题，旨在帮助开发者理解和应用这一技术。 首先，jQuery相册功能是网页设计中常见的元素，用于展示一组图片，通常具有分页、滑动和缩放等交互效果。而...
- `cloudzoom.js`：插件的JavaScript源代码，可能还包括其依赖的库。 - CSS文件：用于定义放大镜区域的样式和动画效果。 - 示例HTML文件：展示如何在页面中正确引入和配置cloud-zoom插件。 - 图片资源：包括主图和...
Cloud Zoom V3.1 是一款基于 jQuery 的高效且流行的图像放大插件，它为网站的图片展示提供了增强的用户体验。这款插件的核心功能是实现图片的飞出式放大，允许用户在不离开页面的情况下，对产品图片进行细致查看，...
《jQuery图片放大镜插件：实现鼠标悬停与图片缩放功能详解》 在现代网页设计中，用户体验已经成为至关重要的因素之一，而图片放大镜功能则可以为用户提供更直观、细致的产品观察体验，尤其适用于电商网站的商品展示...
CloudZoom 是一个对图片进行局部放大的 jQuery 插件，适用于网上购物网站，例如：将其应用在产品列表，方便访客查看商品图片，和以前我们所说的图片放大镜是一样的例子。
jquery仿京东商品详情页图片放大效果 jquery仿百度新闻焦点轮播 jquery分离布局模版 jquery分类导航 jquery加载动画插件 jquery华丽的css3滚动 jquery商品分类选择 jquery图像剪辑 jquery图像剪辑.rar jquery图片...
jquery鼠标滑动按钮图片切换是一款网站常用的简单图片切换特效，带索引按钮，鼠标滑过自动切换。
"jquery鼠标悬停图片标题滑动"是一个常见的jQuery应用场景，主要用于提升用户体验，当用户将鼠标悬停在图片上时，图片的标题会以平滑的方式展示出来。这种效果可以增加网站的视觉吸引力，同时也能有效地呈现图片信息...
在"jQuery图片左右滑动鼠标悬停放大效果"中，jQuery的核心作用在于处理用户交互（如鼠标悬停和点击）以及执行平滑的动画效果。 核心知识点一：jQuery的选择器与DOM操作 在jQuery中，我们可以使用简单的选择器来选取...
**jQuery插件--滑动条** 滑动条（Slider）是一种常见的用户界面元素，它允许用户通过拖动滑块在预设范围内选择一个值。在Web开发中，jQuery库提供了丰富的功能来创建交互性强且美观的滑动条，极大地提升了用户体验...