图片查看插件-magnify

作者: 亖呉?盀
来源: 51数据库
2021-08-09

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>

推荐阅读