JavaScript事件大全补充制作一个属于自己的单机版网页相册

只需要小小改动哦，就拥有一个属于自己的单机版网页相册啦。

修改成自己的相册&＃8211;修改data.js中的数据

查看图片&＃8211;只有一点点特效

分类图片&＃8211;选取类型

搜索图片&＃8211;输入关键字，快速找到你要看的图片

献给不懂编程，但是又充满好奇心，动手能力较强的小伙伴们。（无需比较哈&＃8230;）

可以通过电脑打开点击体验一下（手机端打开有bug哦，也不美观，主要是功能不能体现出来）

也可以复制网址后打开 https://www.cuckoo-cn.com

由于服务器只有一兆带宽，可能第一次访问时比较卡，单机运行还是流畅的哦。

百度网盘源文件 提取码：9p2x

源码附在底部，代码写完可能注释或console.log()都在，别介意。

一个框子搭出来了，后续可能会补充、美化。

1.首先将文件下载到到电脑上，解压。

2.运行index.html,打开方式最好选择Microsoft Edge或者Google Chrome，如果你的文件没有后缀.html也没有关系的哈，也照样可以使用（关于怎样显示文件扩展名，百度一下你就知道啦）。

3.打开后网页效果 博客底部图片，可以选择一个分类，或点击一个；也可以在搜索框输入，图片名字包含的关键字。

然后点击，下面对应图片的按钮，就可以展示图片了。

4.先介绍重点，修改成自己的相册。修改data.js中的参数（很简单的啦）。选择data.js,打开方式使用记事本，或者Notepad++（挺好的文本编辑器），没有的记事本就可以了，看下面的步骤。

imageData 中 “person”:[] 中括号中可以自己将图片名字写进去，名字在双引号中，可以添加自己的分类

imageData 需要对应到sectionData中

5.将相片复制到image文件夹里面去（这里统一的格式是.jpg），没关系，如果能看到文件后缀，直接改就可以了，将.png或其它改成.jpg

结合网页中的操作，找一下对应规则，很快就知道怎么改啦。。。

const imageData = {
"person": ["李若彤", "张檬", "景甜", "范冰冰", "刘亦菲", "王丽坤", "赵丽颖", "刘诗诗"],
"car": ["宝马", "宝马跑车", "奔驰越野", "奔驰跑车", "英菲尼迪"],
"fruiter":["橄榄树","火龙果树","桔子树","苹果树","山楂树"]
};
const sectiOnData= {
"default":"全部",
"person": "人物图片",
"car": "汽车图片",
"fruiter":"果树图片"
};


let imgResult;
let itemData="";
let cOncatData= [];
function come() {
let optiOnResult= "";
for (let key in sectionData) {
optionResult += `------${sectionData[key]}------`;
}
for (let key in imageData) {
for (let j in imageData[key]) {
cOncatData= concatData.concat(imageData[key][j]);
}
}
itemData = "";
concatData.forEach((dataVal) => {
itemData += `

`;
})
document.querySelector("#v-select").innerHTML = optionResult;
document.querySelector("#v-list").innerHTML = itemData;
}
function getCategory(res) {
console.log(itemData);
imgResult = "";
let itemDataTip = "";
if (res.value === "default") {
document.querySelector("#v-list").innerHTML = itemData;
return;
}
imageData[res.value].forEach((dataVal) => {
imgResult += ``;
itemDataTip += `

${dataVal}

`;
})
document.querySelector("#v-list").innerHTML = itemDataTip;
document.querySelector("#box").innerHTML = imgResult;
}
function getSuited(me) {
let suitedVal = me.value;//document.querySelector("#v-input").value;
//console.log(suitedVal);
let items = "";
if ("" !== suitedVal) {
objFilter(suitedVal).forEach((dataVal) => {
items+=`

${dataVal}

`;
})
}
document.querySelector("#v-list").innerHTML = items;
}
function objFilter(res) {
let objData = concatData.filter(function (val, index, self) {
return val.indexOf(res) !== -1;
});
return objData;
};
function see(me){
console.log(me.innerText);
let imgStyle = `
width: 62%;
height: 60vh;
left: 18%;
top: 20vh;
z-index: 2;
box-shadow: 5px 5px 5px #ddd;
transform: rotate(0deg) scale(1.5);
`;
document.querySelector("#box").innerHTML = ``;
}

body{
padding: 0;
margin: 0;
border: 0;
box-sizing: border-box;
overflow: hidden;
}
.container{
display: flex;
width:100vw;
height: 100vh;
/* overflow: hidden; */
background-color: #f7f7f7;
}
.v-aside{
min-width: 20vw;
height: 100%;
border: #ddd 3px solid;
}
.v-form{
width: 96%;
min-height:10vh;
margin: 0 auto;
margin-top: 5px;
font-size: 16px;
}
.v-form-item{
width: 96%;
height:60px;
margin: 0 auto;
}
#v-input{
margin-top: 15px;
width: 93%
}
.v-list{
display: flex;
flex-direction: column;
list-style: none;
width: 95%;
margin: 0 auto;
max-height: 85vh;
overflow-y: auto;
overflow-x: hidden;
}
.v-list::-webkit-scrollbar{
width: 0;
height: 0;
}
.v-list-item:first-of-type{
margin-top: 10px;
}
.v-list-item:last-of-type{
margin-bottom: 70px;
}
.v-list-item{
width: 95%;
height: 50px;
line-height: 50px;
margin-top: 15px;
border: #ddd 1px solid;
align-items: center;
box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.74);
}
.v-list-item:hover{
background-color: #ddd;
color: aquamarine;
border-radius: 6px;
}
.container .box {
display: flex;
flex-direction: row;
flex-wrap: wrap;
min-width: 80vw;
/* margin: 200px auto; */
margin: 0 auto;
position: relative;
border: #ddd 3px solid;
}
div img:nth-child(even) {
width: 200px;
}
div img:nth-child(odd) {
width: 300px;
}
.box img {
border: 1px solid #ddd;
padding: 10px;
position: absolute;
background: #fff;
z-index: 1;
/*过渡动画*/
transition: all 0.6s ease-in-out;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
}
#box img:hover {
width: 62%;
height: 60vh;
left: 18%;
top: 20vh;
z-index: 2; /*提高层级 */
box-shadow: 5px 5px 5px #ddd;
transform: rotate(0deg) scale(1.5);
}
.box img:nth-child(1) {
top: 20vh;
left: 20%;
transform: rotate(-15deg);
}
.box img:nth-child(2) {
top: 20vh;
left: 30%;
transform: rotate(-20deg);
}
.box img:nth-child(3) {
top: 20vh;
left: 40%;
transform: rotate(15deg);
}
.box img:nth-child(4) {
top: 20vh;
left: 50%;
transform: rotate(-20deg);
}
.box img:nth-child(5) {
top: 20vh;
left: 60%;
transform: rotate(-30deg);
}
.box img:nth-child(6) {
top: 50vh;
left: 20%;
transform: rotate(20deg);
}
.box img:nth-child(7) {
top: 50vh;
left: 30%;
transform: rotate(20deg);
}
.box img:nth-child(8) {
top: 50vh;
left: 40%;
transform: rotate(30deg);
}
.box img:nth-child(9) {
top: 50vh;
left: 50%;
transform: rotate(15deg);
}
.box img:nth-child(10) {
top: 50vh;
left: 60%;
transform: rotate(-10deg);
}