jQuery插件Cloud Zoom放大镜效果

发疯的man

于 2017-11-18 21:16:24 发布

阅读量597

点赞数

分类专栏： jquery插件大全文章标签： jquery jquery插件电子商务图片产品

本文链接：https://blog.csdn.net/lzh657083979/article/details/78571329

版权

jquery插件大全专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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>

发疯的man

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery插件Cloud Zoom放大镜效果

http://www.17css.com/cloud-zoom/ 图片放大镜效果是一种不错的效果，多应用于电子商务、图片展示等网站，给用户带来更好的体验。实现这种效果的代码不少，今天要给大家介绍的是 Cloud Zoom，它是 jQuery 的一个插件。和其他产品相比，Cloud Zoom 具有代码少、功能多、兼容性好等特点，并且支持 Tint、 Soft Focus 和 Inner
复制链接

扫一扫