console
let tab_list = [".pc_tab", ".mobile_tab", ".H5_tab", ".wxapp_tab"]
document.querySelector(".nav_tab").addEventListener("click", function (e) {
let target = e.target
let text = e.target.innerHTML;
if (target.classList.contains("nav_tab_item")) {
if (target != document.querySelector(".nav_tab .active")) {
document.querySelector(".nav_tab >.active").classList.remove("active");
target.classList.add("active");
document.querySelector(".case_nav >.active").classList.remove("active");
switch (text) {
case ("PC"):
show(tab_list[0]);
break;
case ("移动端"):
show(tab_list[1])
break;
case ("H5活动页"):
show(tab_list[2])
break;
default:
show(tab_list[3])
break;
}
}
}
})
function show(class_name) {
let item = document.querySelector(class_name);
item.classList.add("active");
item.style.animation = `show 0.5s backwards running`;
item.addEventListener("animationend", function () {
item.style.animation = ``;
})
}
let xhr = new XMLHttpRequest();
xhr.open("GET", "http://platform_node.bluej.cn/api/melon");
xhr.send();
xhr.addEventListener("readystatechange", function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
let res = JSON.parse(xhr.response);
res.data.forEach(function (val) {
create(val,tab_list[Number(val.type)-1]);
})
} else {
alert("网络错误");
}
}
})
function create(item, type) {
let tab = document.querySelector(`${type}`)
let element = document.createElement("div");
element.classList.add("item");
if (type == ".pc_tab") {
element.innerHTML = `
<a href="${item.link}">
<div class="img_box">
<img src="http://showcase.bluej.cn/img/PC.jpg" alt="">
<div class="pc_img" style=" background-image:url(${item.diagram})"></div>
</div>
<div class="text_box">
<p class="title">《${item.name}》</p>
<span>${item.describe}</span>
</div>
</a>`
} else {
element.innerHTML = `
<a href="javascript:void(0)">
<div class="img_box">
<img src="http://showcase.bluej.cn/img/phone.png" alt="">
<div class="mobile_img" style="background-image:url(${item.diagram})"></div>
<div class="QRcode" style="background-image: url(${item.qrcode});"></div>
</div>
<div class="text_box">
<p class="title">《${item.name}》</p>
<span>${item.describe}</span>
</div>
</a>
`
}
tab.appendChild(element);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
<title>蓝景</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="web">
<div class="nav">
<div class="nav_body">
<a href=""><img src="img/bluej_logo1.png" alt=""></a>
<ul>
<li><a href="">案例</a></li>
</ul>
</div>
</div>
<div class="case_box">
<div class="text_box">
<h1>蓝景案例</h1>
<p>PC端案例可点击跳转到案例页面，移动端、H5活动页、小程序可扫码识别。</p>
</div>
<div class="case_nav">
<ul class="nav_tab">
<li class="nav_tab_item active">PC</li>
<li class="nav_tab_item">移动端</li>
<li class="nav_tab_item">H5活动页</li>
<li class="nav_tab_item">小程序</li>
</ul>
<hr>
<div class="tab pc_tab active">
</div>
<div class="tab mobile_tab">
</div>
<div class="tab H5_tab"></div>
<div class="tab wxapp_tab"></div>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style: none; }
html, body, .web {
width: 100%; }
.web .nav {
background: #1A1A1A; }
.web .nav .nav_body {
width: 1140px;
height: 68px;
margin: 0 auto;
display: flex;
align-items: center; }
.web .nav .nav_body ul {
display: flex;
padding-left: 70px;
height: 100%; }
.web .nav .nav_body ul li {
height: 100%; }
.web .nav .nav_body ul li a {
display: block;
height: 100%;
padding: 0 12px;
color: white;
font-size: 14px;
line-height: 68px; }
.web .nav .nav_body ul li a:hover {
background-color: rgba(87, 85, 85, 0.973); }
.web .case_box {
margin-top: 145px; }
.web .case_box .text_box {
width: 100%;
text-align: center;
color: #333333; }
.web .case_box .text_box h1 {
font-size: 30px;
padding: 12px 0; }
.web .case_box .text_box p {
font-size: 13px; }
.web .case_box .case_nav {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
padding-bottom: 100px; }
.web .case_box .case_nav .nav_tab {
display: flex;
align-items: center;
margin-top: 60px; }
.web .case_box .case_nav .nav_tab .nav_tab_item {
margin: 0 30px;
font-size: 18px;
font-weight: bold;
color: #5d5d5d;
padding-bottom: 25px;
border-bottom: 4px solid transparent;
cursor: pointer; }
.web .case_box .case_nav .nav_tab .active {
color: #46a4f6;
border-bottom: 4px solid #46a4f6; }
.web .case_box .case_nav hr {
width: 100%;
margin: 15px; }
.web .case_box .case_nav .tab {
width: 1140px;
display: none;
justify-content: space-around;
flex-wrap: wrap; }
.web .case_box .case_nav .tab .item {
width: 350px; }
.web .case_box .case_nav .tab .item a {
display: block;
width: 100%; }
.web .case_box .case_nav .tab .item a .img_box {
width: 100%;
position: relative;
overflow: hidden; }
.web .case_box .case_nav .tab .item a .img_box img {
width: 100%; }
.web .case_box .case_nav .tab .item a .img_box .pc_img {
position: absolute;
top: 12%;
left: 0;
right: 0;
width: 63%;
height: 49%;
margin: 0 auto;
background-size: cover;
background-repeat: no-repeat; }
.web .case_box .case_nav .tab .item a .img_box .mobile_img {
position: absolute;
top: 12%;
left: 0;
right: 0;
width: 74%;
height: 77%;
margin: 0 auto;
background-size: cover;
background-repeat: no-repeat; }
.web .case_box .case_nav .tab .item a .img_box .QRcode {
content: "";
display: block;
width: 100%;
height: 98%;
border-radius: 12px;
position: absolute;
top: 0;
left: -100%;
transition: all .5s;
background-color: rgba(97, 203, 175, 0.8);
background-repeat: no-repeat;
background-size: 40%;
background-position: center; }
.web .case_box .case_nav .tab .item a .text_box {
color: #5d5d5d;
text-align: left; }
.web .case_box .case_nav .tab .item a .text_box .title {
font-size: 20px;
font-weight: bold;
padding: 10px 0; }
.web .case_box .case_nav .tab .item a .text_box span {
font-size: 14px; }
.web .case_box .case_nav .tab .item a:hover .img_box .QRcode {
left: 0; }
.web .case_box .case_nav .active {
display: flex; }
@keyframes show {
from {
transform: translateX(-100%); }
to {
transform: translateX(0%); } }