作者

1. 效果实现

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

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

1.jpg

2.jpg

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

已添加到喜欢了