业务需要,从后台获取的图片列表,用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",&