懒加载
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
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.gif');
//将真实的图片地址保存到自定义属性中
img.setAttribute('data-src','images/'+i+'.jpg');
img.setAttribute('style','width: 600px;height:350px;margin:5px');
//先将图片添加到文档片段中
frag.appendChild(img);
}
//将文档片段添加到容器中
container.appendChild(frag);
//将容器添加到body中
document.body.insertBefore(container,document.body.firstElementChild);
//监听事件的滚动页面
window.addEventListener('scroll',LazyLoaded,false);
//懒加载方法
function LazyLoaded() {
//滚动高度
var scrollTop=document.documentElement.scrollTop;
//可视区高度
var cliendHeight =document.documentElement.clientHeight;
//将所有图片转为数组
var imgArr=Array.prototype.slice.call(document.images,0);
imgArr.forEach(function (img) {
// 图片顶部的距离如果小于可视区高度与可视区的滚动距离的话，说明该图片进入到了可视区
if (img.offsetTop <= (scrollTop + cliendHeight)) {
img.setAttribute('src',img.dataset.src);
}
});
window.addEventListener('load',LazyLoadeda,false);
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
选项卡
实例
<!DOCTYPE html>
<html lang="en">
<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: lightblue;
}
.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 data-index="1" class="active">手机</li>
<li data-index="2" class="active">电脑</li>
<li data-index="3" class="active">汽车</li>
</ul>
</div>
<!-- 选项卡的标签导航对应去-->
<div class="tab-content">
<div class="detail active" data-index="1">
<ul>
<li><a href="https://www.vmall.com/product/10086225607276.html" >华为p30手机</a> </li>
<li><a href="https://www.mi.com/mi9/" >小米9手机</a> </li>
<li><a href="https://www.apple.com/cn/iphone-xr/" >iPhone XR</a> </li>
</ul>
</div>
<div class="detail active" data-index="2">
<ul>
<li><a href="https://www.apple.com/cn/macbook-pro/">苹果MacBook Pro</a> </li>
<li><a href="https://www.vmall.com/product/10086000689735.html">华为MacBook Pro</a> </li>
<li><a href="https://www.mi.com/mibook/air13-2019/">小米Air笔记本</a> </li>
</ul>
</div>
<div class="detail" data-index="3">
<ul>
<li><a href="https://www.bmw.com.cn/zh/all-models/m-series/m8-coupe/2019/campaign.html">宝马M8</a> </li>
<li><a href="">道奇蝰蛇</a> </li>
<li><a href="https://www.mercedes-benz.com.cn/vehicles/amg/amg-gt-s.html">奔驰GT</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(ev) {
tabArr.forEach(function (tab){tab.classList.remove('active') });
ev.target.classList.add('active');
detailArr.forEach(function (detail){detail.classList.remove('active') });
detailArr.forEach(function (detail) {
if (detail.dataset.index === ev.target.dataset.index) {
detail.classList.add('active');
}
})
}
tabNav.addEventListener('mouseover', showDetail, false);
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
