欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

图片查看插件-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

相关标签: 前端 jquery