jQuery插件Cloud Zoom放大镜效果

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

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>

阅读全文

0 0