javascript实现的效果:
thumb-bar <div>以便在单击它们时在displayed-img <img>元素中显示相应的图像。
手动实现了html、css和javascript协作,对关键的部分写了代码注释
<!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>
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;
}
/*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
*/
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)
MDN官方文档javascript练习之图片库:MDN官方文档javascript练习之图片库
e.target的用法:e.target的用法
本文地址:https://blog.csdn.net/sinat_26566137/article/details/107526205
如对本文有疑问, 点击进行留言回复!!
offset、client、scroll (width,height、left,top、X,Y)
网友评论