查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="referrer" content="no-referrer">
<title>小汽车</title>
<script src="../vue3.js"></script>
<script src="./data.js"></script>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
background-color: rgba(227, 226, 226, 0.7);
}
.container {
width: 1065px;
background-color: #fff;
margin: 0 auto;
margin-top: 50px;
padding: 0px 30px;
padding-top: 30px;
}
.wrap {
font-size: 12px;
}
.nav {
display: flex;
}
.nav li {
padding: 3px 15px;
width: 30px;
text-align: center;
margin-right: 20px;
border: 1px solid red;
border-radius: 2px;
color: red;
font-size: 1.2em;
cursor: pointer;
}
.nav li.active {
background-color: red;
color: #fff;
}
.content {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
margin-top: 30px;
}
.content img {
width: 100%;
height: 100%;
}
.content span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 2em;
color: #fff;
opacity: 0;
cursor: pointer;
z-index: 5;
}
.content .item {
width: 240px;
height: 120px;
position: relative;
overflow: hidden;
margin-bottom: 30px;
margin-right: 20px;
transition: all 0.6s;
background-color: aqua;
animation: r 0.3s;
transform-origin: 50% 100%;
}
.content .item::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
opacity: 0;
transition: all 0.5s;
cursor: pointer;
z-index: 4;
}
.content .item:hover::before,
.content .item:hover span {
opacity: 1;
}
.preview {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: center;
align-items: center;
z-index: 9;
}
.preview>div {
width: 80px;
height: 80px;
border: 5px solid #fff;
border-radius: 50%;
position: absolute;
color: #fff;
font-size: 2em;
text-align: center;
line-height: 80px;
cursor: pointer;
top: 50%;
margin-top: -40px;
}
@keyframes r {
from {
transform: translateY(-20px) scale(0, 0);
}
to {
transform: translateY(0) scale(1, 1);
}
}
.preview>div:hover {
background-color: #cacaca;
}
.preview .prev {
left: 50px;
}
.preview .prev::before {
content: "P";
}
.preview .next {
right: 50px;
}
.preview .next::before {
content: "N";
}
.wrap div.show {
display: flex;
}
</style>
</head>
<body>
<div id="root">
<div class="container">
<div class="wrap">
<ul class="nav">
<li v-for="(v,key) in all" :class="{active:show===key}" :key="key" @click="change(key)">{{key}}</li>
</ul>
<div class="content">
<div class="item" v-for="(v,i) in list" :key="show+v.title" @click="imgIndex=i">
<img :src="v.src" :alt="v.alt">
<span>{{v.alt}}</span>
</div>
</div>
<div class="preview" @click.self="imgIndex=-1" v-show="imgIndex!==-1">
<div class="prev" @click.stop="prev"></div>
<div class="next" @click.stop="next"></div>
<img :src="list[imgIndex]?.src" alt="">
</div>
</div>
</div>
</div>
<script>
let listObj = {};
listObj.全部 = []
data.forEach(val => {
if (listObj[val.type] == undefined) {
listObj[val.type] = []
}
listObj[val.type].push(val)
const i = listObj.全部.findIndex(item => {
return val.title === item.title
})
if (i === -1) {
listObj.全部.push(val)
}
})
console.log(listObj);
const app = Vue.createApp({
el: "#root",
data() {
return {
all: listObj,
// 当前展示数据
list: listObj.全部,
// 当前展示图片的下标
imgIndex: -1,
// 当前展示的分类名字
show: '全部'
}
},
methods: {
change(key) {
this.show = key;
this.list = this.all[key]
},
prev() {
this.imgIndex--;
if (this.imgIndex === -1) this.imgIndex = this.list.length - 1;
},
next() {
this.imgIndex++;
if (this.imgIndex === this.list.length) this.imgIndex = 0;
},
},
});
app.mount('#root')
</script>
</body>
</html>
原文地址：http://www.cnblogs.com/maxiaopi/p/16852853.html
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，请务用于商业用途!
3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！
8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载
声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性
