swipebox——一款点击小图浏览大图的jquery插件

最新推荐文章于 2024-03-26 20:05:18 发布

岚漾忆雨

最新推荐文章于 2024-03-26 20:05:18 发布

阅读量5.5k

点赞数

分类专栏： web前端文章标签： jquery 图片放大

本文链接：https://blog.csdn.net/baidu_35085676/article/details/76208804

版权

web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

下载地址

官网

使用方法

将下载的压缩包解压，咱么主要会用到以下文件

src
├── css
│   ├── swipebox.css  #css样式文件，二选一，推荐swipebox.min.css，文件更小
│   └── swipebox.min.css
├── img #这个目录的东需全部需要，放到你项目静态目录的根目录下
│   ├── icons.png
│   ├── icons.svg
│   └── loader.gif
└── js #实现动态效果的js代码，二选一，推荐第二个
    ├── jquery.swipebox.js
    └── jquery.swipebox.min.js

和

lib
└── jquery-2.1.0.min.js # 重要，必须是这个版本的jq，最新版无效

开始你的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 脚本及样式文件（根据你文件的具体地址）-->
    <script src="/static/js/jquery-2.1.0.min.js"></script>
    <script src="/static/js/jquery.swipebox.min.js"></script>
    <link rel="stylesheet" href="/static/css/swipebox.min.css">
    <meta charset="UTF-8">
    <title>测试效果</title>
</head>
<body>
<div class="swipeboxEx"> <!--每个 div class="swipeboxEx" 代表一组图片-->
    <a  href="/media/big1.png" class="swipebox">  <!-- 点击图片后全屏放大的图片-->
        <img src="/media/small1.png" alt="image">  <!-- 直接显示的图片-->
    </a> <!-- 每对a标签代表一张大小图-->
</div>
<!--多组图片写多个 div class="swipeboxEx" -->

<!-- 直接复制-->
<script type="text/javascript">
    ;( function( $ ) {
        $( '.swipebox' ).swipebox();
    } )( jQuery );
</script>
</body>
</html>

最后说一点，先引用jq的js文件，后引用swipebox的，而且jq的文件必须是作者自带的！！

岚漾忆雨

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
swipebox——一款点击小图浏览大图的jquery插件

下载地址官网使用方法将下载的压缩包解压，咱么主要会用到以下文件src├── css│ ├── swipebox.css #css样式文件，二选一，推荐swipebox.min.css，文件更小│ └── swipebox.min.css├── img #这个目录的东需全部需要，放到你项目静态目录的根目录下│ ├── icons.png│ ├── icons.svg│
复制链接

扫一扫