`
乌托邦之爱
  • 浏览: 278471 次
  • 性别: Icon_minigender_1
  • 来自: 沈阳
社区版块
存档分类
最新评论

jQuery插件Cloud Zoom鼠标滑动放大图片

jQueryJavaScriptCSSXHTML电子商务 
阅读更多 
<!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 演示图片

目前，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 自定义方法调用示例
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics