图片查看插件-magnify

最新推荐文章于 2024-12-25 10:41:38 发布

原创最新推荐文章于 2024-12-25 10:41:38 发布 · 1.2k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端

当前文章被收录于：

前端

14 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

这篇博客介绍了如何在HTML页面中利用jQuery Magnify插件实现图片的放大功能。通过引入必要的CSS和JS文件，然后在HTML元素上添加data-magnify属性，可以轻松创建一个图片画廊。简洁的结构只需为图片设置data-magnify和data-src属性，即可实现点击放大效果。

1、需要引用的文件

<link href="~/Content/magnify/jquery.magnify.css" rel="stylesheet" />
<script src="~/Content/magnify/jquery.magnify.js"></script>
<script src="~/Scripts/jquery.js"></script>

2、在 HTML 中添加 data-magnify 属性，插件会自动初始化

默认结构

<div>
        <a data-magnify="gallery" href="~/img/IMG_0844.JPG">
            <img src="~/img/IMG_0844.JPG" style="width:100px;height:100px;">
        </a>
        <a data-magnify="gallery" href="~/img/IMG_0844.JPG">
            <img src="~/img/IMG_0844.JPG" style="width:100px;height:100px;">
        </a>
    </div>

简洁结构

@*data-src属性(大图地址)，src属性(缩略图地址)*@

<div>
        <img data-magnify='gallery'
             data-src="/img/IMG_0844.JPG"
             src="~/img/IMG_0844.JPG"
             alt="点击放大"
             style="width:100px;height:100px;">
</div>

标签

#jquery