业务需要,从后台获取图片列表,用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、方法2中,expndPhoto创建了一个id="overlay",class="overlay"的div,再给div创建了一个id="expand",class="overlayimg"的img标签,overlay和overlayimg类选择器定义如下:

           .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; //高度自动
}

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

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

img点击放大的js实现的更多相关文章

  1. Hexo next博客的pjax一个Bug引发的关于pjax用法的小技巧-----pjax后图片点击放大的js失效

    文章目录 广告: 背景 发现 解决 get技能 广告: 本人博客地址:https://mmmmmm.me 源码:https://github.com/dataiyangu/dataiyangu.git ...

  2. jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片(仿相册插件)

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实 ...

  3. js限制图片大小、点击放大图片、点击在新开页面显示

    缩放图片到合适大小        function ResizeImages() {            var myimg, oldwidth, oldheight;            var ...

  4. html图片上传阅览并且点击放大

                  关闭   qq_31540195的博客       目录视图 摘要视图 订阅 异步赠书:9月重磅新书升级,本本经典           程序员9月书讯      每周荐书: ...

  5. 动画--android图片点击放大动画,并遮挡旁边的控件

    http://blog.csdn.net/s13488941815/article/details/40649823: 首先是点击放大可以使用android自带的缩放动画,因为要遮盖其他控件,就需要控 ...

  6. ios开发图片点击放大

    图片点击放大,再次点击返回原视图.完美封装,一个类一句代码即可调用.IOS完美实现 创建了一个专门用于放大图片的类,以下为.h文件 #import <Foundation/Foundation. ...

  7. js 如何判断鼠标点击事件还是js代码调用

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  8. Android中Textview显示Html,图文混排,支持图片点击放大

    本文首发于网易云社区 对于呈现Html文本来说,Android提供的Webview控件可以得到很好的效果,但使用Webview控件的弊端是效率相对比较低,对于呈现简单的html文本的话,杀鸡不必使用牛 ...

  9. viewer && ImageFlow 图片滚动组件 图片点击放大 可以滚轮放大缩小 viewer

    ImageFlow https://finnrudolph.com/products/imageflow https://github.com/countzero/ImageFlow http://w ...

随机推荐

  1. XGBoost的推导和说明

    一.简介 XGBoost是“Extreme Gradient Boosting”的缩写,其中“Gradient Boosting”一词在论文Greedy Function Approximation: ...

  2. 厉害了,Java EE 再次更名为 Jakarta EE

    来自:开源中国 https://www.oschina.net/news/108108/java-ee-rename-as-jakarta-ee Eclipse基金会最近对 Java EE 标准的每个 ...

  3. Failed to start component [StandardEngine[Catalina].StandardHost[localhost].StandardContext[/ssm]]

    org.apache.catalina.LifecycleException: Failed to start component [StandardEngine[Catalina].Standard ...

  4. [未解决]报错:ssh_exchange_identification: read: Connection reset by peer

    报错代码: ssh_exchange_identification: read: Connection reset by peer fatal: 无法读取远程仓库. 请确认您有正确的访问权限并且仓库存 ...

  5. Springboot整合Hikari数据库连接池,密码加密

    1.application.yml配置 spring: datasource: jdbcUrl: jdbc:mysql://127.0.0.1:3306/jby?serverTimezone=UTC& ...

  6. SQL数据库—<4>SQL编程--简单学习

    数据类型:列的类型 变量定义:declare 变量名 类型名    变量名:以@开头 赋值和取值:    赋值:set/select 变量=值    取值:变量名例:declare @a varcha ...

  7. Rsync备份服务实战

    目录 Rsync备份服务实战 一.Rsync 二.rsync的应用场景 1.Rync的数据同步模式 2.rsync的三种模式 三.rsync配置服务端客户端 四.rsync实战 实战一 报错解决方法: ...

  8. go语言从例子开始之Example3.变量

    在 Go 中,变量 被显式声明,并被编译器所用来检查函数调用时的类型正确性 package main import "fmt" func main() { var 声明 1 个或者 ...

  9. 转载:jQuery的deferred对象详解

    一.什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作.其中,既有异步的操作(比如ajax读取服务器数据),也有同步的操作(比如遍历一个大型数组),它们 ...

  10. WinForm解决UI假死

    运行WinForm程序时,如果后台执行比较费时的操作,前天UI就会假死卡住,很影响使用感受,这里我们简单的解决一下这个问题 using System; using System.Collections ...