img点击放大的js实现
业务需要,从后台获取图片列表,用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实现的更多相关文章
- Hexo next博客的pjax一个Bug引发的关于pjax用法的小技巧-----pjax后图片点击放大的js失效
文章目录 广告: 背景 发现 解决 get技能 广告: 本人博客地址:https://mmmmmm.me 源码:https://github.com/dataiyangu/dataiyangu.git ...
- jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片(仿相册插件)
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实 ...
- js限制图片大小、点击放大图片、点击在新开页面显示
缩放图片到合适大小 function ResizeImages() { var myimg, oldwidth, oldheight; var ...
- html图片上传阅览并且点击放大
关闭 qq_31540195的博客 目录视图 摘要视图 订阅 异步赠书:9月重磅新书升级,本本经典 程序员9月书讯 每周荐书: ...
- 动画--android图片点击放大动画,并遮挡旁边的控件
http://blog.csdn.net/s13488941815/article/details/40649823: 首先是点击放大可以使用android自带的缩放动画,因为要遮盖其他控件,就需要控 ...
- ios开发图片点击放大
图片点击放大,再次点击返回原视图.完美封装,一个类一句代码即可调用.IOS完美实现 创建了一个专门用于放大图片的类,以下为.h文件 #import <Foundation/Foundation. ...
- js 如何判断鼠标点击事件还是js代码调用
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- Android中Textview显示Html,图文混排,支持图片点击放大
本文首发于网易云社区 对于呈现Html文本来说,Android提供的Webview控件可以得到很好的效果,但使用Webview控件的弊端是效率相对比较低,对于呈现简单的html文本的话,杀鸡不必使用牛 ...
- viewer && ImageFlow 图片滚动组件 图片点击放大 可以滚轮放大缩小 viewer
ImageFlow https://finnrudolph.com/products/imageflow https://github.com/countzero/ImageFlow http://w ...
随机推荐
- Numpy基础之创建与属性
import numpy as np ''' 1.数组的创建:np.array([]) 2.数组对象的类型:type() 3.数据类型:a.dtype 4.数组的型shape:(4,2,3) 5.定义 ...
- Ubuntu安装程序提示无法获得锁
目录 1.问题描述 2.问题原因 3.解决方案 3.1方法一:杀掉apt-get进程 3.2方法二:强制解锁 1.问题描述 E: 无法获得锁 /var/lib/dpkg/lock-frontend - ...
- Debian 防火墙 打开 关闭
Debian原来用的是UFW防火墙,之前没接触过这种类型防火墙,懵逼了半天,这里记录一下简单的使用规则,后期在使用过程中慢慢完善UFW防火墙的使用操作方法: 查看防火墙现有规则: ufw status ...
- Aspnetcore下面服务器热更新与配置热加载
原文:Aspnetcore下面服务器热更新与配置热加载 Asp.net的热更新方案Appdomain在aspnetcore中不被支持了 新的方案如下: 配置文件更新选项 reloadOnChange ...
- 2018-5-26-Latex-去掉行号
title author date CreateTime categories Latex 去掉行号 lindexi 2018-05-26 10:32:25 +0800 2018-2-13 17:23 ...
- 2018-2-13-win10-uwp-圆角按钮
title author date CreateTime categories win10 uwp 圆角按钮 lindexi 2018-2-13 17:23:3 +0800 2018-2-13 17: ...
- Ansible --05 ansible jinja2
ansible jinja2 什么是jinjia2模板 jinjia2是Python的全功能模块引擎 Jinjia2与Ansible的关系 Ansible通常会使用jinjia2模板来修改被管理主机的 ...
- 【转载】将本地图片转成base64
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS 3D 的魅力
作者 | 子慕大诗人 来源 | www.cnblogs.com/1wen/p/9064011.html 前言: 最近玩了玩用css来构建3D效果,写了几个demo,所以博客总结一下. 在阅读 ...
- CUDA学习之一:二维矩阵加法
今天忙活了3个小时,竟然被一个苦恼的CUDA小例程给困住了,本来是参照Rachal zhang大神的CUDA学习笔记来一个模仿,结果却自己给自己糊里糊涂,最后还是弄明白了一些. RZ大神对CUDA关于 ...