关于前端JS图片查看器的选择和使用。

jquery 专栏收录该内容
4 篇文章 0 订阅

最近做的项目需要后台展示身份证照片。这个时候需要一个功能比较实用又不会太复杂的图片查看器了。经过几番抉择,终于选定了一个JQ插件——Magnify。

具体下载自己搜索。以下是使用方式.

简单引入这三个个文件。

<link href="/path/to/magnify.css" rel="stylesheet">
<script src="/path/to/jquery.js"></script>
<script src="/path/to/jquery.magnify.js"></script>

 

模版上的使用方式。
 

<a data-magnify="gallery" href="big1.jpg">
  <img src="small1.jpg">
</a>
<a data-magnify="gallery" href="big2.jpg">
  <img src="small2.jpg">
</a>
<a data-magnify="gallery" href="big3.jpg">
  <img src="small3.jpg">
</a>

只要是带 data-magnify="gallery" 的链接包含的图片。就会自动加载。

 

也可以这样

<img data-magnify="gallery" data-src="big1.jpg" src="small1.jpg">
<img data-magnify="gallery" data-src="big2.jpg" src="small2.jpg">
<img data-magnify="gallery" data-src="big3.jpg" src="small3.jpg">

如果添加 data-magnify 的属性,插件会自动初始化

否则需要手动执行初始化代码

 

$('[data-magnify=gallery]').magnify(options);

 接下来是效果图

 

简单实用的效果完成了。

 

 

  • 0
    点赞
  • 1
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 像素格子 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值