jQuery插件Cloud Zoom放大镜效果

来源:互联网 发布:附加数据库失败 编辑:程序博客网 时间:2024/06/16 03:22

http://www.17css.com/cloud-zoom/

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

目前,Cloud Zoom 的最新版本是 1.0.2,我们就此版本为例(1.0.2与之前版本有所不同),来看看 Cloud Zoom 是如何工作的。首先,当然是引入插件以及附带的 CSS 文件,当然,你喜欢的话,样式可以自己编写。然后编写 XHTML 代码:
这里写图片描述

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <link rel="stylesheet" href="../css/cloud-zoom.css"/>    <script src="../js/jquery-1.4.4.min.js"></script>    <!--如果想自定义放大后的效果的话用js添加ref属性。必须放在cloud-zoom.1.0.2.min.js之前-->    <script>        $(function(){            $('.cloud-zoom').attr('rel','tint:"#f00",adjustX:150,position:"buttom"');        })    </script>    <script src="../js/cloud-zoom.1.0.2.min.js"></script></head><body>    <!--href 是指向大照片     src是默认看到的照片   class别忘加-->    <a href="../pic/bigimage00.jpg" class="cloud-zoom">        <img src="../pic/smallimage.jpg" alt="xxx" />    </a></body></html>