一、懒加载
1.动态生成div容器并创建文档片段
2.利用for循环遍历动态生成图片地址和图片标签，并将真实图片地址储存在图片标签的自定义属性中
3.先将图片存储到文档片段中，之后再将图片添加到容器中
4.创建事件，遍历图片数组，若图片高度小于滚动高度+可是窗口高度，则显示该图片
5.初始可视窗口默认显示图片
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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');
var imgUrl = 'http://www.homwi.cn/images/' + i + '.jpg';
img.setAttribute('src','http://www.homwi.cn/images/loading.gif');
img.setAttribute('data-src',imgUrl);
img.setAttribute('style','width:600px;height:300px;margin:10px;')
frag.appendChild(img);
}
container.appendChild(frag);
document.body.insertBefore(container,document.body.firstElementChild);
window.addEventListener('scroll',lazyLoaded,false);
window.addEventListener('load',lazyLoaded,false);
function lazyLoaded(ev){
var imgArr = Array.prototype.slice.call(document.images,0);
var scrollTop = document.documentElement.scrollTop;
var clientHeight = document.documentElement.clientHeight;
imgArr.forEach(function(img){
if(img.offsetTop<=(scrollTop + clientHeight)){
img.setAttribute('src',img.dataset.src)
}
});
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
二、选项卡
1.设置的自定义选项卡属性的index值与内容页自定义属性的index值对应，并通过id或标签等获取到
2.默认第一部分内容与第一个选项菜单为激活状态，其他内容不显示
2.创建事件，当鼠标移入或点击当前选项卡时，动态添加该选项卡与对应内容的激活属性
3.当鼠标点击下一个选项时，清空所有选项与内容的激活属性，并将激活属性重新添加给当前点击的选项
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡</title>
</head>
<style>
ul,li{
list-style: none;
margin:0;
padding: 0;
}
.container{
width: 600px;
min-height: 400px;
margin:20px auto;
}
.nav{
width: inherit;
height: 40px;
overflow: hidden;
}
.nav ul li{
float: left;
width: 80px;
height: 40px;
padding: 0 10px;
background-color: #6d9ecf;
border-radius:8px 8px 0 0;
text-align: center;
line-height: 40px;
margin-right:2px;
color: #fff;
cursor: pointer;
}
.nav ul .active{
background-color: #069;
}
.contant{
width:600px;
min-height: 348px;
margin-top: 2px;
}
.contant .list{
background-color: #069;
color: #fff;
min-height: 348px;
padding:10px 20px;
display: none;
}
.contant .active{
display: block;
}
.contant ul li{
height: 45px;
line-height: 46px;
border-bottom: 1px dashed #fff;
}
.contant ul li span{
font-weight:bold;
margin:0 6px;
}
</style>
<body>
<div class="container">
<div class="nav">
<ul>
<li data-index="1" class="active">今日热点</li>
<li data-index="2">国际新闻</li>
<li data-index="3">国内新闻</li>
</ul>
</div>
<div class="contant">
<ul class="list active" data-index="1">
<li><span>·</span>***深入喀喇沁旗林场农村考察调研</li>
<li><span>·</span>华龙一号全球首堆完成外穹顶封顶</li>
<li><span>·</span>***各界强烈谴责暴力乱港行径 支持警方严正执法</li>
<li><span>·</span>英媒：美企数周内或可重新向华为***</li>
<li><span>·</span>郑州五云山违建跑马场、别墅 官方：已展开调查</li>
<li><span>·</span>学画22个月就开画展 人类画家都将败给人工智能？</li>
</ul>
<ul class="list" data-index="2">
<li><span>·</span>一夜暴雨，南昌变成了这样！最新积水路段公布</li>
<li><span>·</span>天宫二号下周将受控离轨，少量残骸落入南太平洋</li>
<li><span>·</span>广西贺州成功举办首届世界长寿论坛暨生命科学大会</li>
<li><span>·</span>两湖南厅官博硕士论文均被指抄袭 两单位：仍在调查</li>
</ul>
<ul class="list" data-index="3">
<li><span>·</span>日韩贸易战升级，韩国深陷绝境，普京及时出手，安倍晋三后悔不已</li>
<li><span>·</span>马克龙最担心的事发生，特朗普亲自下令，突然宣布对法国动手了</li>
<li><span>·</span>土耳其S400刚下飞机，美军专家就不请自来，俄：看谁敢靠近？</li>
<li><span>·</span>歼-20变“试验机”，中国六代机关键技术突破，美国恼羞成怒</li>
<li><span>·</span>美众议院通过议案，限制特朗普对伊朗动武</li>
</ul>
</div>
</div>
<script>
var nav = document.getElementsByClassName('nav').item(0);
var navList = nav.firstElementChild.children;
var navArr = Array.prototype.slice.call(navList,0);
var list = document.getElementsByClassName('list');
var listArr = Array.prototype.slice.call(list,0);
nav.addEventListener('click',show,false);
// nav.addEventListener('hover',show(),false);
function show(ev) {
navArr.forEach(function(navList){
navList.classList.remove('active');
});
ev.target.classList.add('active');
listArr.forEach(function(list){
list.classList.remove('active');
});
listArr.forEach(function(list){
if(list.dataset.index === ev.target.dataset.index){
list.classList.add('active');
}
});
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
