作者

• 

  刘东

  长乐未央公司-全栈主讲

1. 效果实现

实现了 PC 端点击图片放大效果。

具体效果，可以使用电脑访问此页面，并点击以下图片：

2. 开发说明

寻找了一圈，没有发现特别满意的插件，只有上古 jQuery 插件 FluidBox 令人比较满意。

使用的版本为：1.3.2，但是此版本不兼容新版 jQuery。于是我将插件的 js 部分做了修改，让它能完美的兼容 jQuery 3.x

3. 调用方法

插件的调用非常简单，主要分为以下几个部分：

3.1. HTML 部分

例如有如下 HTML 代码，里面有多张图片。

<div class="content">
    <h1>长乐未央 FluidBox Demo</h1>
    <img src="https://images.clwy.cn/user/1/attachment/2021/0b56624c-3db7-4ae3-86a6-7d6496c157d7.jpg!large" alt="">
    <img src="https://images.clwy.cn/user/1/attachment/2021/1f170c9a-7f9e-4348-a8d8-777e4be406c9.jpg!large" alt="">
</div>

3.2. 使用 JS 批量修改 HTML 的 img 标签部分

• 使用 js 找到指定需要调用插件的容器。
• 并给容器内所有图片外层包裹上超链接，添加对应的 class 和 data-action 属性。

const imgEls = $(".content img");
for (let el of Array.from(imgEls)) {
    $(el).wrap(
        `<a href='${$(el).attr(
            "src"
        )}' class='zoom-image' data-action='zoom'></a>`
    );
}

3.3 启动 FluidBox 插件

找到对应的选择器后，直接调用就好了。

$("a.zoom-image").fluidbox({
    // 缩放级别，默认 0.95
    viewportFill: 0.8,
    closeTrigger: [
        {
            selector: "window",
            event: "scroll",
        },
    ],
});

源码

插件源码和调用 demo，请下载后访问：

fluidbox.zip

转载请注明，来自https://clwy.cn/information/articles/10