一起CSS

当前位置:一起CSS > 未分类 > 文章正文

jQuery插件Cloud Zoom

日期:2010-06-11 分类:未分类

图片放大镜效果是一种不错的效果,多应用于电子商务、图片展示等网站,给用户带来更好的体验。实现这种效果的代码不少,今天要给大家介绍的是 Cloud Zoom,它是 jQuery 的一个插件。和其他产品相比,Cloud Zoom 具有代码少、功能多、兼容性好等特点,并且支持 Tint、 Soft Focus 和 Inner 三种放大镜模式。

cloud-zoom 演示图片

目前,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,里面也有相关说明。

查看:1,789 评论:2 标签:,

相关日志

共有 2 条评论

发表留言

请言之有物,无意义留言或只为留链接留言一律不予通过!

提示: 您可以使用一些简单的标签: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

分类

最新日志

最新评论

存档

链接

  • 亚当学院
  • CSS视频教程下载
  • 前沿视频教室
  • 前端爱好者
  • GoodText
  • Kily`s Blog
  • mymickey
  • 秦丰网站策划
  • 奥想创意
  • 我的职业生涯
  • 蜗爱CSS
  • 蜈蚣's Blog
  • web标准学习—小辉博客
  • 十字花匠

© Copyright 2010 一起CSS All Rights Reserved