Cloud Zoom是一个图像放大jQuery插件,效果堪比Magic Zoom。相对于流行jQZoom插件,Cloud Zoom体积小,有更多的功能和更强大的跨浏览器兼容性。

猛击这里查看演示DEMO

特点

兼容大多数浏览器,(已经测试通过的浏览器有: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

本文由月光光译自professorcloud.com,原文地址http://www.professorcloud.com/mainsite/cloud-zoom.htm

======================V3.1破解手记===================================================

http://www.evilsec.com/cloud-zoom-v3-1-crack-notes.html

完整入门指南:http://www.evilsec.com/cloud-zoom-quick-start-guide.html

图片放大镜插件 Cloud Zoom v3.1的更多相关文章

  1. 图片放大镜——jQuery插件Cloud Zoom

    下载地址:cloud_zoom.rar 图片放大镜效果是一种不错的效果,多应用于电子商务.图片展示等网站,给用户带来更好的体验.实现这种效果的代码不少,今天要给大家介绍的是 Cloud Zoom,它是 ...

  2. jQuery Cloud Zoom:图片放大镜插件 破解插件

    /* Cloud Zoom 10 Site License (CZ01-10). Version 3.1 rev 1312051822 */ (function(e) { function s(a) ...

  3. 原生JS实现图片放大镜插件

      前  言 我们大家经常逛各种电商类的网站,商品的细节就需要用到放大镜,这个大家一定不陌生,今天我们就做一个图片放大镜的插件,来看看图片是如何被放大的…… 先看一下我们要是实现的最终效果是怎么样的  ...

  4. 一款超炫的jquery图片播放插件[Cloud Carousel]

    今天给大家介绍一个jquery图片播放插件,也可以说是一款幻灯片放映插件,它叫Cloud Carousel,支持自动播放.图片预览.鼠标滚轮滚动,非常酷,下图是效果预览. 该jquery图片播放项目演 ...

  5. [原创] JavaScript 图片放大镜插件 enlarge.js 以及移动版 enlarge.touch.js

    拖拖拉拉准本了一个月,终于把网站做好了.也终于可以分享这两个插件了.这两个插件,一个是 jQuery 版本,适合鼠标使用的,另一个是原生 JavaScript 制作,适合触摸屏使用(touch 事件) ...

  6. jQuery基础(常用插件 表单验证,图片放大镜,自定义对象级,jQuery UI,面板折叠)

    1.表单验证插件——validate   该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下:   $(form).validate({o ...

  7. Jquery的jqzoom插件的使用(图片放大镜)

    今天学习一下,图片放大镜功能,需要使用插件JQzoom 引入文件 <script type="text/javascript" src="js/jquery.min ...

  8. jquery cloudzoom 3.0,magiczoom 放大镜插件 破解 移除版权信息

    jquery Cloud Zoom一款放大镜插件.但是无奈 官方下载的始终有版权信息,因此想到如下方法去掉版权信息,测试可行! 官方网址:http://www.starplugins.com/clou ...

  9. jqzoom图片放大镜

    jqzoom是一个图片放大器插件.它功能强大,使用简便! 引入js与css: <script type="text/javascript" src="js/jque ...

随机推荐

  1. 3.第一个python程序

    学习任何一门语言的第一步,首先要写个'hello world',这算是程序员的一个传统.但在写之前,还有注意几个问题. 首先,python是一门脚本语言,而脚本语言的特点就是:我们写的代码会先由解释器 ...

  2. Python脚本控制的WebDriver 常用操作 <九> 定位一组对象

    下面将使用WebDriver来模拟操作定位一组对象的操作 测试用例场景 从上一节的例子中可以看出,webdriver可以很方便的使用find_element方法来定位某个特定的对象,不过有时候我们却需 ...

  3. python Django 学习笔记(三)—— 模版的使用

    模版基本介绍 模板是一个文本,用于分离文档的表现形式和内容. 模板定义了占位符以及各种用于规范文档该如何显示的各部分基本逻辑(模板标签). 模板通常用于产生HTML,但是Django的模板也能产生任何 ...

  4. .NET开源工作流RoadFlow-系统布署及注意事项

    非常感谢您在百忙之中抽空来了解RoadFlow,下面我们说一下如果在自己本地搭建环境吧. 1.环境要求 数据库:sqlserver2005以上版本.服务器:IIS6.0以上,或iisexpress.d ...

  5. Mysql账号管理

    一 用户添加 通过insert 方式添加用户 insert into mysql.user(Host,User,Password) values("localhost"," ...

  6. Redbean:入门(四) - 反射机制 以及 事务

    <?php //引入rb入口文件 include_once 'rb.php'; //定义dsn以及相关的数据 $dsn = 'mysql:host=localhost;dbname=hwibs_ ...

  7. Zygote(app_process)相关分析1

    首先我们从Init.c中来看,当Init中解析完init.rc文件时会得到一系列的action,通过action去调用一些函数. Zygote是在init.rc中service section中 se ...

  8. Android--启动拍照功能并返回结果

    因为没有深入学习拍照这块功能,所以只是简单的调用了一下系统的拍照功能,下面代码: //拍照的方法 private void openTakePhoto(){ /** * 在启动拍照之前最好先判断一下s ...

  9. windows phone listbox虚拟化(下)

    之前写过一篇关于listbox虚拟化的文章,那里采用的方法都是自己早期研究的一些思路,然后发现当数据很大的时候,其实性能效果还是不太理想,下面让我们来仔细想一想到底是基于什么原因,我们回去破坏默认的虚 ...

  10. DataReader 链接关闭解惑篇

    不管是啥xxDataReader,都是继承DataReader实现的,所以是有共性的,因此标题就以DataReader为题了. 情况一:DataReader 默认链接不关闭 static void M ...