收藏
批改狀態(tài)：合格
老師批語：這二個作業(yè)的關(guān)鍵在于實現(xiàn)的原理和代碼的DOM結(jié)構(gòu)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>懶加載代碼實例演示</title>
</head>
<body >
<div class="container" style="...">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="1" data-src="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="2" data-src="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="3" data-src="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="4" data-src="http://cdn.jirengu.com/book.jirengu.com/img/4.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="5" data-src="http://cdn.jirengu.com/book.jirengu.com/img/5.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="6" data-src="http://cdn.jirengu.com/book.jirengu.com/img/6.jpg">
.
.
</div>
<script>
var container = document.createElement('div');
var frag = document.createDocumentFragment();
for (var i = 1; i <= 16; i++) {
var imgUrl = 'http://cdn.jirengu.com/book.jirengu.com/img/' + i + '.jpg';
var img = document.createElement('img');
img.setAttribute('src', 'http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif');
img.setAttribute('data-src', imgUrl);
img.setAttribute('style', 'width:600px;height:350px;margin: 5px;');
frag.appendChild(img);
}
container.appendChild(frag);
document.body.insertBefore(container, document.body.firstElementChild);
window.addEventListener('scroll', lazyLoaded, false);
function lazyLoaded() {
var scrollTop = document.documentElement.scrollTop;
var clientHeight = document.documentElement.clientHeight;
var imgArr = Array.prototype.slice.call(document.images, 0);
imgArr.forEach(function (img) {
if (img.offsetTop <= (scrollTop + clientHeight)) {
img.setAttribute('src', img.dataset.src);
}
});
}
window.addEventListener('load', lazyLoaded, false);
</script>
</body>
</html>點擊 "運行實例" 按鈕查看在線實例
<head>
<meta charset="UTF-8">
<title>選項卡</title>
<style>
ul,li {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
}
a:hover {
text-decoration-color: red;
text-decoration-line: underline;
}
.tab-container {
width: 300px;
height: 200px;
}
.tab-nav {
overflow: hidden;
}
.tab-nav ul li {
float: left;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
cursor: pointer;
}
.active {
background-color: lightcoral;
}
.tab-content .detail{
line-height: 30px;
min-height: 200px;
padding-top: 10px;
display: none;
}
.detail.active {
display: block;
}
</style>
</head>
<body>
<div class="tab-container">
<div class="tab-nav">
<ul>
<li class="active" data-index="1">選項卡1</li>
<li data-index="2">選項卡2</li>
<li data-index="3">選項卡3</li>
</ul>
</div>
<div class="tab-content">
<div class="detail active" data-index="1">
<ul>
<li><a href="">1.皚如山上雪，皎若云間月。</a></li>
<li><a href="">2.聞君有兩意，故來相決絕。</a></li>
<li><a href="">3.今日斗酒會，明旦溝水頭</a></li>
</ul>
</div>
<div class="detail" data-index="2">
<ul>
<li><a href="">01.躞蹀御溝上，溝水東西流。</a></li>
<li><a href="">02.凄凄復(fù)凄凄，嫁娶不須啼。</a></li>
<li><a href="">03.愿得一心人，白頭不相離。</a></li>
</ul>
</div>
<div class="detail" data-index="3">
<ul>
<li><a href="">001.竹竿何裊裊，魚尾何簁簁！</a></li>
<li><a href="">002.男兒重意氣，何用錢刀為！</a></li>
<li><a href="">003.出自兩漢卓文君的《白頭吟》</a></li>
</ul>
</div>
</div>
</div>
<script>
var tabNav = document.getElementsByClassName('tab-nav').item(0);
var tabList = tabNav.firstElementChild.children;
var tabArr = Array.prototype.slice.call(tabList, 0);
var detail = document.getElementsByClassName('detail');
var detailArr = Array.prototype.slice.call(detail, 0);
tabNav.addEventListener('click', showDetail, false);
function showDetail(evt) {
tabArr.forEach(function (tab) { tab.classList.remove('active') });
evt.target.classList.add('active');
detailArr.forEach(function (detail) {detail.classList.remove('active')});
detailArr.forEach(function (detail) {
if (detail.dataset.index === evt.target.dataset.index) {
detail.classList.add('active');
}
});
}
</script>
</body>
</html>點擊 "運行實例" 按鈕查看在線實例
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號