效果如下



目录如下

代码如下:

//index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>照片库</title>
<link rel="stylesheet" href="style.css">
<script src="main.js" defer></script>
</head> <body>
<h1>照片库</h1> <div class="full-img">
<img class="displayed-img" src="images/pic1.jpg">
<div class="overlay"></div>
<button class="dark">变暗</button>
</div> <div class="thumb-bar"></div>
</body>
</html>
//main.js
const displayedImage = document.querySelector('.displayed-img');
//缩略图库
const thumbBar = document.querySelector('.thumb-bar'); const btn = document.querySelector('button');
const overlay = document.querySelector('.overlay'); /* 遍历图片并添加至缩略图区 */
for(let i = 1; i <= 5; i++) {
const newImage = document.createElement('img');
newImage.setAttribute('src', 'images/pic' + i + '.jpg');
thumbBar.appendChild(newImage);
newImage.onclick = e => {
const imgSrc = e.target.getAttribute('src');
//大图
displayedImage.setAttribute('src', imgSrc);
};
} /* 编写 变亮/变暗 按钮 */
btn.onclick = () => {
//这种方式机智哇
const btnClass = btn.getAttribute('class');
if(btnClass === 'dark') {
btn.setAttribute('class', 'light');
btn.textContent = '变亮';
overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
} else {
btn.setAttribute('class', 'dark');
btn.textContent = '变暗';
overlay.style.backgroundColor = 'rgba(0, 0, 0, 0)';
}
};

随机推荐

  1. 嵌入式linux应用程序移植方法总结

    嵌入式linux应用程序移植方法总结 前段时间一直在做openCapwap的移植和调试工作,现在工作已接近尾声,编写本文档对前段工作进行一个总结,分享下openCapwap移植过程中的经验和感悟.江浩 ...

  2. java设计模式(六)--观察者模式

    转载:设计模式(中文-文字版) 目录: 简单目标任务实现 观察者模式介绍 观察者模式代码实现 观察者模式是JDK中使用最多的模式之一,非常有用.我们也会一并介绍一对多关系,以及松耦合(对,没错,我们说 ...

  3. EPUBBuilder编辑器新版

    epub全称为Electronic Publication的缩写,意为:电子出版, epub于2007年9月成为国际数位出版论坛(IDPF)的正式标准,以取代旧的开放Open eBook电子书标准,e ...

  4. box-sizing属性

    我们都知道,设置元素的padding或者margin属性时都会改变元素的width和height,传统的方法是将padding和margin的值考虑进去,运用数学的方法进行计算来加以调整,以便使布局不 ...

  5. ps调整图层

    自然饱和度:自然饱和度命令和色相饱和度命令里的饱和度相比最大的区别是自然饱和度只增加未达到饱和的颜色的饱和度,而饱和度命令则增加整个图像的饱和度,可能会导致图像颜色过于饱和,而自然饱和度不会出现这种问 ...

  6. 使用maven, myeclipse工具构建spring mvc项目

    一.使用myeclipse 创建一个新的 maven项目. (ps:1.在filter过滤的时候输入 webapp 选择"maven-archetype-webapp". 2.在m ...

  7. AnkhSVN 安装

    为 visual Studio 2013 添加 AnkhSVN 步骤 到 https://ankhsvn.open.collab.net/downloads 下载 2.6x或以上 安装 AnkhSvn ...

  8. Codevs 1689 建造高塔

    1689 建造高塔 时间限制: 1 s 空间限制: 128000 KB 题目等级 : **钻石 Diamond** 题目描述 Description n有n种石块,石块能无限供应.每种石块都是长方体, ...

  9. iOS组件化思路-大神博客研读和思考

    一.大神博客研读 随着应用需求逐步迭代,应用的代码体积将会越来越大,为了更好的管理应用工程,我们开始借助CocoaPods版本管理工具对原有应用工程进行拆分.但是仅仅完成代码拆分还不足以解决业务之间的 ...

  10. Browser Link: Failed to deserialize JSON in Browser Link call

    问题 VS2013中调试程序发现,在浏览器控制台输出如下截图代码: