zepto网站开发/可以免费领取会员的软件
目录
- 1、前端实现项目效果
- 2、html、css和javascript协作实现
- 2.1、html
- 2.2 、css
- 2.3 、javascript
- 3、javascript知识点涉及
- 3.1 e.target
- 4、参考
1、前端实现项目效果
javascript实现的效果：
- 循环浏览所有图像，并为每个图像插入一个元素thumb-bar ，将图像嵌入页面中。
- 将onclick处理程序附加到每个内部，
thumb-bar <div>以便在单击它们时在displayed-img <img>元素中显示相应的图像。 - 将onclick处理程序附加到，以便在单击该处理程序时将变暗效果应用于完整尺寸的图像。再次单击它时，再次消除了暗化效果。
2、html、css和javascript协作实现
手动实现了html、css和javascript协作，对关键的部分写了代码注释
2.1、html
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>照片库</title><link rel="stylesheet" href="style.css"></head><body><h1>照片库示例</h1><div class="full-img"> <!-- 这是第1块的显示区域，这里看似结构很简单，没什么内容，但具体的类属性的设置则是由javascript动态生成的 --><img class="displayed-img" src="images/pic1.jpg"><div class="overlay"></div><button class="dark">变暗</button></div><div class="thumb-bar"> <!-- 这是第2块的显示区域 --></div><script src="main.js"></script></body>
</html>
2.2 、css
h1 {font-family: sans-serif;text-align: center;
}body {width: 640px;margin: 0 auto;
}.full-img {position: relative;display: block;width: 640px;height: 480px;
}.overlay {position: absolute;top: 0;left: 0;width: 640px;height: 480px;background-color: rgba(0,0,0,0);
}button {border: 0;background: rgba(150,150,150,0.6);text-shadow: 1px 1px 1px white;border: 1px solid #999;position: absolute;cursor: pointer;top: 2px;left: 2px;
}.thumb-bar img {display: block;width: 20%;float: left;cursor: pointer;
}
2.3 、javascript
/*document.querySelector选择器里面的带“.”的内容都是html中的类属性内容，不带点的则为自带的鼠标点击外部触发属性*//*只要是document的选择器声明的变量，可以有很多方法：setAttribute，appendChild，onclick......*/
const displayedImage = document.querySelector('.displayed-img');/*displayed-img是对应html文件中的类属性*/
const thumbBar = document.querySelector('.thumb-bar');const btn = document.querySelector('button');
const overlay = document.querySelector('.overlay');/* 添加图片循环 */for (var i = 1; i <= 5; i++) {const newImage = document.createElement('img'); /*对应上面部分大图的图片*/newImage.setAttribute('src', 'images/pic' + i + '.jpg');thumbBar.appendChild(newImage);/*对应下面部分的5张图片区域的效果，Node链表的效果——太精妙了，我刚开始还以为要很死板用画格子的方式实现*/newImage.onclick = function(e) { /*先初始化，没有鼠标点击的时候，displayedImage不会改变；一旦有鼠标点击，则会由*/displayedImage.src = e.target.src;}}/* 编写 变暗/变量 按钮功能 */
btn.onclick = function() {const btnClass = btn.getAttribute('class'); /*const btn = document.querySelector('button')，选择器对应设置的属性*/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)';}}/*ps:疑问？感觉根据visual编辑器点击跳转得到的方法注释跟实际不太一样；appendChild<T extends Node>(newChild: T): T;* Returns a copy of node. If deep is true, the copy also includes the node's descendants.readonly target: EventTarget | null;* Returns the event's timestamp as the number of milliseconds measured relative to the time origin.e.target.src的含义：target定义：target 属性规定哪个 DOM 元素触发了该事件。target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。e.target.src表示获取事件触发的src图片；参考：https://blog.csdn.net/qq_36412715/article/details/84345237*/
3、javascript知识点涉及
3.1 e.target
target定义：
target 属性规定哪个 DOM 元素触发了该事件。
target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。
语法：
event.target
event.target.nodeName //获取事件触发元素标签名（li，p，div，img，button…）
event.target.id //获取事件触发元素id
event.target.className //获取事件触发元素classname
event.target.innerHTML //获取事件触发元素的内容（li）
4、参考
MDN官方文档javascript练习之图片库：MDN官方文档javascript练习之图片库
e.target的用法：e.target的用法