只需要小小改动哦，就拥有一个属于自己的单机版网页相册啦。
修改成自己的相册--修改data.js中的数据
查看图片--只有一点点特效
分类图片--选取类型
搜索图片--输入关键字，快速找到你要看的图片
献给不懂编程，但是又充满好奇心，动手能力较强的小伙伴们。（无需比较哈...）
可以通过电脑打开点击体验一下（手机端打开有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
结合网页中的操作，找一下对应规则，很快就知道怎么改啦。。。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./index.css">
</head>
<style>
</style>
<body onload="come()">
<div class="container">
<div class="v-aside">
<div class="v-form">
<select id="v-select" class="v-form-item" name="v-select" onchange="getCategory(this)">
</select>
<input class="v-form-item" type="text" id="v-input" onkeyup="getSuited(this)" placeholder="图片名称">
</div>
<div id="v-list" class="v-list">
</div>
</div>
<div class="box" id="box">
</div>
</div>
<script src="./data.js"></script>
<script src="./index.js"></script>
</body>
</html>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 += `<option value="${key}">------${sectionData[key]}------</option>`;
}
for (let key in imageData) {
for (let j in imageData[key]) {
concatData = concatData.concat(imageData[key][j]);
}
}
itemData = "";
concatData.forEach((dataVal) => {
itemData += `<div class="v-list-item" onclick="see(this)">${dataVal}</div>`;
})
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 += `<img src="./image/${dataVal}.jpg" alt="" />`;
itemDataTip += `<div class="v-list-item" onclick="see(this)">${dataVal}</div>`;
})
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+=`<div class="v-list-item" onclick="see(this)">${dataVal}</div>`;
})
}
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 = `<img style="${imgStyle}" src="./image/${me.innerText}.jpg" alt="" />`;
}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);
}
扫一扫
4651
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
