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

放大之前:

放大之后:

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

附代码(js实现):

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

             function addExpand() {
var imgs = document.getElementsByTagName("img");
imgs[0].focus();
for(var i = 0;i<imgs.length;i++){
imgs[i].onclick = expandPhoto;
imgs[i].onkeydown = expandPhoto;
}
}

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

             function expandPhoto(){
var overlay = document.createElement("div");
overlay.setAttribute("id","overlay");
overlay.setAttribute("class","overlay");
document.body.appendChild(overlay); var img = document.createElement("img");
img.setAttribute("id","expand")
img.setAttribute("class","overlayimg");
img.src = this.getAttribute("src");
document.getElementById("overlay").appendChild(img); img.onclick = restore;
}

3、(style样式)方法2中,expndPhoto创建了一个id="overlay",class="overlay"的div,再给div创建了一个id="expand",class="overlayimg"的img标签,overlay和overlayimg类选择器定义如下:

 <style>
.overlay{
background-color:#000; //背景色
opacity: 1.0; //不透明度
filter:alpha(opacity=100); //透明度
position: fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index: 10;
overflow:auto; //滚动条
}
.overlayimg{
position: absolute;
z-index: 11;
width:99%; //宽度
height:auto; //高度自动
}
</style>

4、方法2中,给创建的img标签的onclick指定了restore方法,该方法实现了点击大图回到图片列表的功能,定义如下:

             function restore(){
document.body.removeChild(document.getElementById("overlay"));
document.body.removeChild(document.getElementById("expand"));
}

5、复制粘贴即可

原文链接:https://blog.csdn.net/weixin_33890526/article/details/94694759

JS点击img图片放大再次点击缩小JS实现 简单实用Ctrl+C+V就可以用的更多相关文章

  1. 网页mp3语音展示,点击图片放大,点击图片跳转链接,调表格

    查看mp3语音 <td class="value"><embed src="${sounds.soundName}" type="a ...

  2. 手把手教小白如何用css+js实现页面中图片放大展示效果

    1.前言      很多童鞋会在项目中遇到一些上传图片,展示图片的操作,但是图片呢有大有小,为了页面的美观,有时候我们需要将图片展示成固定宽高度,但是呢,领导就会说,我想看大图片,怎么办?想看就看呀, ...

  3. 实现类似于QQ空间相册的点击图片放大,再点后缩小回原来位置

    前几天看到了有人在android5.0上实现了如下图一样的效果,我自己就去搜了下.参考了国外一篇文章和国内的一篇文章,最终实现了想要的效果.具体参考的网址我已经贴到文章末尾,大家可以去英文的那个网站看 ...

  4. Android 实现类似于QQ空间相册的点击图片放大,再点后缩小回原来位置

    前几天看到了有人在android5.0上实现了如下图一样的效果,我自己就去搜了下.参考了国外一篇文章和国内的一篇文章,最终实现了想要的效果.具体参考的网址我已经贴到文章末尾,大家可以去英文的那个网站看 ...

  5. 初学ToggleButton 点击button,更换button背景图片;再次点击,恢复之前背景图

    上方的图标,R.drawable.register_checked  是选中图片 下方的图标,   R.drawable.register_unchecked 是未选中图片 默认是上方的选中效果.点击 ...

  6. 2018.7.2 如何用js实现点击图片切换为另一图片,再次点击恢复到原图片

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  7. jquery点击添加样式,再次点击移除样式

    $("#divSetting").on("click", function () { $(this).toggleClass("open") ...

  8. vue项目 一行js代码搞定点击图片放大缩小

    一行js代码搞定xue项目需要点击图片放大缩小,其实主要用的是用到了vue:class的动态切换,内容比较简单.一开始我把维护的需求想得太复杂了,和测试小姐姐聊了一下才反应过来. 两个月不到跟了四个项 ...

  9. js实现图片点击弹出放大效果

    点击图片,显示蒙板,放大图片的简单案例 HTML代码: <div> <img height=" src="https://img-blog.csdn.net/20 ...

随机推荐

  1. 微信小程序 点击事件 传递参数

    wxml: data-参数名="值" bindtap="函数名" <view class="buy-button {{cap_select == ...

  2. Linux内核编译完整过程

    Linux内核编译完整过程 通过网上的资料我自己的实际内核编译,我把对Linux内核编译的过程写在这里,也许对其他的Linux爱好者的编译学习有些帮助,其中很大部分是网上的资料,另外就是我在实际编译过 ...

  3. 使用pdo,使用pdo无法插入数据怎么办

    如果你使用了最新版的XAMPP,那么你几乎不用改变php.ini的设置,就可以使用pdo but,插了一晚上,程序既不报错也不插入数据,真是气死人,后来发现是实例化pdo对象的时候没有指定字符集.所以 ...

  4. electron桌面通知,修改默认通知应用名electron.app.Electron为自己应用的名称

    在做electron桌面通知时,按照文档实现弹出通知,但是默认的应用名为electron.app.Electron 解决办法 就是在主进程中设置 app.setAppUserModelId('myAp ...

  5. 自定义 Swiper 的上一页,下一页按钮

    1. Swiper 的上一页,下一页按钮,不是必需包含在container 中的 2. 定义上一页,下一页按钮的样式,CSS略.... 3. 在初始化Swiper中,定义上一页,下一页按钮

  6. @Data注解使用后get set报错解决方法

    Maven项目中已经导入相关的lombok.jar包但是使用后仍提示无set/get方法 .在idea中安装如下插件,安装后重启idea可用不报错. 转载于:https://www.cnblogs.c ...

  7. java文件断点续传上传下载解决方案

    这里只写后端的代码,基本的思想就是,前端将文件分片,然后每次访问上传接口的时候,向后端传入参数:当前为第几块文件,和分片总数 下面直接贴代码吧,一些难懂的我大部分都加上注释了: 上传文件实体类: 看得 ...

  8. CF603E Pastoral Oddities 优先队列+结论+LCT维护生成树

    首先,一个神奇的结论:一个合法的方案存在的条件是每一个联通块的节点数都是偶数个的. 这个可以用数学归纳法简单证一证. 证出这个后,我们只需动态加入每一个边,并查看一下有哪些边能够被删除(删掉后联通块依 ...

  9. Spring Boot教程(二十八)通过JdbcTemplate编写数据访问

    数据源配置 在我们访问数据库的时候,需要先配置一个数据源,下面分别介绍一下几种不同的数据库配置方式. 首先,为了连接数据库需要引入jdbc支持,在pom.xml中引入如下配置: <depende ...

  10. Apicloud_(模板)登陆注册功能模板

    项目已托管到Github上 传送门 不需要使用任何图片资源,需要用到SHA1.js库文件, Apicloud_(接口验证)用户注册头部信息X-APICloud-AppKey生成 传送门 项目全代码放到 ...