收藏
批改状态：合格
老师批语：这二个案例,几乎所有的网站上都会有的, 一定要掌握
JavaScript懒加载
图片懒加载技术是通过HTML5自定义属性data- 来保存图片的路径。
使用JavaScript scroll滚动事件 可视区域高度，滚动高度来计算出当前的可视区域（当前图片距离顶部的高度 <= 当前可视区的高度+当前滚动的高度）把可视区域的图片地址赋给src
最后使用 load加载事件。把当打开网页时出现在可是区域的图片加载出来
使用滚动事件和 加载事件时需要给当前窗口添加事件 window.
<!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>图片懒加载</title>
<style type="text/css">
div{
width: 780px;
margin: auto;
text-align: center;
/* box-shadow: 0 1px 2px black; */
border: 1px solid black;
border-top: none;
}
.box {
width: 780px;
height: 60px;
background-color: lightcoral;
/* line-height: 59px; */
/* box-shadow: 0 1px 3px black; */
border-bottom: none;
border-top: 1px solid black;
color: azure;
}
img {
border-radius: 6px;
box-shadow: 1px 1px 6px black;
}
</style>
</head>
<body>
<div class="box">
<h3>图片列表</h3>
</div>
<script>
// 添加一个全局的div标签
var container = document.createElement('div');
// 文档片段（碎片）
var frag = document.createDocumentFragment();
// 动态生成图片
for (var i = 1; i<=12; i++) {
var img = document.createElement('img');
// 设置一张占位图片
img.setAttribute('src', 'images/loading/loading.gif');
//将真实的图片保存到自定义属性中
img.setAttribute('data-src', 'images/loading/'+i+'.jpg')
// 给图片添加一个style内联样式
img.setAttribute('style', 'width:360px; height:220px; margin:12px;')
// 先将图片添加到文档片段中
frag.appendChild(img);
}
console.log(document.body.firstElementChild);
// 将文档片段添加到container容器中
container.appendChild(frag);
// 将container添加到body容器内，第一个子元素节点
document.body.insertBefore(container,document.body.children[2]);
// 滚动事件监听器
window.addEventListener('scroll', loading, false);
// 获取所有图片
var imgs = document***ages;
// 将所有图片集合转为数组
var imgarr = Array.prototype.slice.call(imgs,0);
console.log(imgarr);
function loading(event) {
// 滚动高度
var scrollTop = document.documentElement.scrollTop;
// 可视区域高度
var clienfHeight = document.documentElement.clientHeight;
// 遍历数组
imgarr.forEach(function(img){
// 当前图片距离顶部的高度
var imgtop = img.offsetTop;
console.log(imgtop);
// 如果当前图片距离顶部的高度小于等于 当前可视区的高度+当前滚动的高度。就说明当前图片进入了可视区
if (imgtop <= (clienfHeight+scrollTop)) {
// 显示可视区图片
img.src = img.dataset.src;
}
});
}
// 添加一个load加载事件
// 加载事件load:当HTML文档与资源全部加载完成时触发加载事件
window.addEventListener('load', loading, false);
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
JavaScript选项卡
学会之前的轮播图，其实选项卡是非常简单的
使用css的dispaly：none 属性来隐藏所有选项卡下面的内容
再单独设置一个class 用来显示隐藏的内容
通过data- 来把导航条和对应的内容区进行绑定
使用 点击 或者 鼠标移入事件来控制选项卡的切换。
当用户点击对应的选项卡后给对应的内容块添加上之前设置的显示隐藏的class
<!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>Tab切换选项卡</title>
<!-- 选项卡CSS样式 -->
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box {
width: 800px;
margin: 12px auto;
}
ul {
list-style-type: none;
}
.tab-nav {
width: 306px;
margin-top:20px;
/* border: 1px dotted black; */
overflow: hidden;
}
.tab-nav ul li {
width: 100px;
text-align: center;
float: left;
/* margin-right:12px; */
}
.tab-nav ul li:hover {
/* 鼠标移入样式 */
cursor: pointer;
}
.tab-nav .active {
background-color: black;
color: white;
}
.tab-content {
width: 304px;
}
.tab-content .content {
padding: 6px;
line-height: 1.6rem;
border: 1px dotted black;
display: none;
}
.tab-content .active {
display: block;
}
</style>
</head>
<body>
<div class="box">
<!-- 选项卡标签导航 -->
<!-- 使用自定义属性data-把标签导航和对应的内容区进行关联 -->
<div class="tab-nav">
<ul>
<li data-index="1" class="active">HTML</li>
<li data-index="2">CSS</li>
<li data-index="3">JavaScript</li>
</ul>
</div>
<!-- 选项卡标签导航对应的内容区 -->
<div class="tab-content">
<div class="content active" data-index="1">
<ul>
<li>前端语言</li>
<li>HTML</li>
<li>是一个超文本标记语言</li>
</ul>
</div>
<div class="content" data-index="2">
<ul>
<li>前端语言</li>
<li>CSS</li>
<li>是用来美化网页的</li>
</ul>
</div>
<div class="content" data-index="3">
<ul>
<li>JavaScript</li>
<li>真的很好玩</li>
<li>弱类型脚本语言</li>
</ul>
</div>
</div>
</div>
<script>
// 获取Tab导航
var tabNav = document.getElementsByClassName('tab-nav')[0];
// 获取tab导航下第一个子元素节点UL下所有的子元素节点
var tabList = tabNav.firstElementChild.children;
// 把导航标签转为数组
var tabArr = Array.prototype.slice.call(tabList, 0);
// 获取内容区
var content = document.getElementsByClassName('content');
// 把内容区转为数组
var conArr = Array.prototype.slice.call(content, 0)
console.log(conArr);
// 给tab导航添加点击事件代理
tabNav.addEventListener('click', tabclick, false);
function tabclick(event) {
// 当点击了一个导航标签后，其他标签的高亮样式全部取消
tabArr.forEach(function(tab) { tab.classList.remove('active')});
// 给当前点击的标签添加active高亮样式
event.target.classList.add('active');
console.log(event.target.classList);
// 清除内容详情区样式，并根据内容区data-index和导航data-index的对应关系，显示对应的内容页面
conArr.forEach(function(conlist) { conlist.classList.remove('active') });
conArr.forEach(function(conlist) {
// 给当前点击的导航对应的内容区添加active 默认显示样式
if ( event.target.dataset.index === conlist.dataset.index ) {
conlist.classList.add('active');
}
});
}
tabNav.addEventListener('mouseover', tabclick, false);
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
