实现图片在线预览,可切换可放大缩小

想要实现点击图片可预览,能够切换下一张,能够放大和缩小,使用EZView.js这个插件即可,好用又简单。

文件下载地址: 链接:https://pan.baidu.com/s/1Cs9Kv_2GuNXhQq0KGdBJnA 提取码:hri8

实现方式在文件的head头中引入本文件和jquery文件即可:

<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="./js/EZView.js"></script>

在想要预览图片的尾部增加对于ezview的调用,如图:

$("body").on("click","img",function(){
     $("#EZView").remove();
     $("img").EZView();
     $(this).click();
 });

注:这个必须放在页面的尾部,不能写在头部,就算增加$(function(){})也不行。

写到这里,你可能想就完成了,如果现在运行你就会发现根本不行,你打开console会看到他有一个报错。

还需要做最后一步,是对img标签增加alt属性,至于具体的值就不用太在意了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值