h5 img js 点击图片放大_JS点击img图片放大再次点击缩小JS实现 简单实用Ctrl+C+V就可以用...

业务需要,从后台获取的图片列表,用img标签展示,用户需要查看大图。记录下来以便学习和参考.示例图如下:

放大之前:

放大之后:

点击后放大(由于图片高度超出了页面,需要通过overflow:auto;设置滚动条,点击放大图片回到列表界面)

附代码(js实现):

1、获取所有img标签,添加展开功能,该方法在图片列表加载完成以后执行:

1 functionaddExpand() {2 var imgs = document.getElementsByTagName("img");3 imgs[0].focus();4 for(var i = 0;i

2、方法1种循环给图片的onclick和onckeydown指定了expandPhoto方法,该方法实现了点击图片放大的功能:

1 functionexpandPhoto(){2 var overlay = document.createElement("div");3 overlay.setAttribute("id","overlay");4 overlay.setAttribute("class","overlay");5 document.body.appendChild(overlay);6

7 var img = document.createElement("img");8 img.setAttribute("id",&

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值