图片查看插件-magnify
程序员文章站
2022-06-23 08:23:50
1、需要引用的文件2、在 HTML 中添加 data-magnify 属性,插件会自动初始化默认结...
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>
本文地址:https://blog.csdn.net/fei0700/article/details/109245115