因為上傳不了圖片的文件夾,所以整套放上了github.
https://github.com/beebb0128/php.cn
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul, li {
margin: 0;
padding: 0;
list-style: none;
}
a {
display: block;
font-size: 24px;
margin: 10px 20px;
text-decoration: none;
}
a:hover {
color: red;
}
.tab-container {
width: 450px;
height: 300px;
margin: 0 auto;
}
.tab-nav {
overflow: hidden;
}
.tab-nav ul li {
float: left;
font-size: 36px;
width: 150px;
height: 50px;
line-height: 50px;
text-align: center;
cursor: pointer;
}
.tab-nav ul li:hover {
background-color: #003366;
color: white;
}
.active {
background-color: lightblue;
}
.tab-content .detail {
line-height: 30px;
min-height: 200px;
padding-top: 10px;
display: none;
}
.detail.active {
display: block;
}
.container {
height: 4430px;
width: 1080px;
margin: 0 auto;
border: 5px solid deepskyblue;
padding: 20px;
}
</style>
</head>
<body>
<div class="tab-container">
<div class="tab-nav">
<ul>
<li class="active" data-index="1">First</li>
<li data-index="2">Second</li>
<li data-index="3">Third</li>
</ul>
</div>
<div class="tab-content">
<div class="detail active" data-index="1">
<ul>
<li><a href="">First tab content</a></li>
<li><a href="">First tab content</a></li>
<li><a href="">First tab content </a></li>
</ul>
</div>
<div class="detail" data-index="2">
<ul>
<li><a href="">Second tab content</a></li>
<li><a href="">Second tab content</a></li>
<li><a href="">Second tab content</a></li>
</ul>
</div>
<div class="detail" data-index="3">
<ul>
<li><a href="">Third tab content</a></li>
<li><a href="">Third tab content</a></li>
<li><a href="">Third tab content</a></li>
</ul>
</div>
</div>
</div>
<div class="container"></div>
<script>
function partOne() {
var frag = document.createDocumentFragment();
//insert img
for (var i = 1; i <= 6; i++) {
var imgUrl = 'img/' + i + '.jpg';
var img = document.createElement('img');
// set default img
img.setAttribute('src', 'images/loading.gif');
// import real image
img.setAttribute('data-src', imgUrl);
img.setAttribute('style', 'width:1080px;height:720px;margin-top:10px;')
frag.appendChild(img);
}
//import the img into DOM
document.querySelector('.container').appendChild(frag);
function lazyLoad() {
//get scrollTop value
var scrollTop = document.documentElement.scrollTop;
//get current height
var currHeight = document.documentElement.clientHeight;
//transfer image object to array
var ArrImg = Array.from(document.images);
ArrImg.forEach(function (img) {
if (img.offsetTop < (scrollTop + currHeight)) {
img.setAttribute('src', img.dataset.src);
}
})
}
window.addEventListener('scroll', lazyLoad, false);
window.addEventListener('load', lazyLoad, false);
}
function partTwo() {
//find tab nav section and transfer to array
var tabNav = document.querySelectorAll('.tab-nav li');
var tabNavArr = Array.from(tabNav);
//find tab content section and transfer to array
var tabContent = document.querySelectorAll('.tab-content .detail');
var tabContentArr = Array.from(tabContent);
document.querySelector('.tab-nav').addEventListener('click', show, false);
function show(evt) {
//action in tab-nav
tabNavArr.forEach(function (tab) {
tab.classList.remove('active')
});
evt.target.classList.add('active');
tabContentArr.forEach(function (content) {
content.classList.remove('active');
});
tabContentArr.forEach(function (content) {
if (content.dataset.index === evt.target.dataset.index) {
content.classList.add('active');
}
});
}
}
partOne();
partTwo();
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例