尚硅谷H5实战

最新推荐文章于 2024-09-23 10:18:30 发布

ydenergy_殷志鹏

最新推荐文章于 2024-09-23 10:18:30 发布

阅读量341

点赞数

分类专栏：实战文章标签： js html

本文链接：https://blog.csdn.net/grd_java/article/details/107633838

版权

实战专栏收录该内容

26 篇文章

订阅专栏

b站搜尚硅谷h5实战，有配套资源

在这里插入图片描述

文章目录

一、准备知识
二、实战

一、准备知识

1、DOM中的位置与尺寸

parentNode父节点
不要和css混淆,js父节点就是包含它的直接父元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="warp">warp
			<div id="inner1">inner1
				<div id="inner2">
					inner2
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" charset="utf-8">
		window.onload=function(){
			/* 判断普通元素的父节点是设么 */
			var inner2=document.querySelector("#inner2");
			console.log("inner2的id为"+inner2.id)
			console.log("inner2的父节点id为"+inner2.parentNode.id)
			
			/* 用来区别css，比如绝对定位参照是最近的一个开启定位的父节点，而js不是 */
			inner2.style.position="absolute"/* 给inner2开启绝对定位 */
			var warp=document.querySelector("#warp")
			warp.style.position="relative"/* 给warp开启相对定位 */
			
			console.log("开启定位后，inner2的父节点id为"+inner2.parentNode.id+",可以看到和css的区别，如果按css标准，应该是warp")
		}
	</script>
</html>

列表删除

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul id="deleteLi">
			<li>xy1 <a href="javascript:;">删除</a></li>
			<li>xy2 <a href="javascript:;">删除</a></li>
			<li>xy3 <a href="javascript:;">删除</a></li>
			<li>xy4 <a href="javascript:;">删除</a></li>
			<li>xy5 <a href="javascript:;">删除</a></li>
		</ul>
	</body>
	<script type="text/javascript" charset="utf-8">
		window.onload=function(){
			// 删除
			var all_a=document.querySelectorAll("#deleteLi > li > a");/* 获取所有deleteLi列表中的a标签 */
			
			for(let i=0;i<all_a.length;i++){/* 遍历所有获取到的a标签 */
				all_a[i].onclick=function(){/* 给每个a标签添加单击事件 */
					this.parentNode.style.display="none";/* 通过this获取当前对象，设置display为none，因为是异步解析，如果使用all_a[i].parentNode ,那么i只能是6*/
				}
			}		
		}
	</script>
</html>

offsetParent
offsetParent是一个非常重要的属性，用来设置偏移量
涉及到偏移量的主要是offsetLeft、offsetTop、offsetHeight、offsetWidth这四个属性
offsetParent是上面4个属性偏移的依据，offsetParent用来确定自己的父级元素，而其它四个属性参照这个父级元素偏移
但是js和css是两个东西，不要混淆，js的offsetParent属性参照的是内边距边界
另外只要是html元素，就有offsetLeft和offsetTop属性,并且这两个属性是只读的，不可修改
既然只读那么怎么偏移呢？之后会讲

offsetParent主要定位依据
一、如果body和html标签的margin和padding被清掉
	ie7以上浏览器（5大浏览器都是ie7以上，但是火狐有例外）
		本身定位为fixed
			offsetParent:null (ie7以上浏览器，不包括火狐)
				虽然是null但是offsetTop和offsetLeft依旧会参照body定位
			offsetParent:body (火狐浏览器)
		本身定位不为fixed
			父级没有定位
				offsetParent:body
			父级有定位
				offsetParent:第一个设置定位的父级元素
二、没有被清除，因为大多数的网站都是清掉的，所以不做总结

<!DOCTYPE html>
<html id="html">
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
			}
			#warp{
				background-color: #0000FF;
			}
			#inner1{
				background-color: #008000;
				position: relative;
				
			}
			#inner2{
				background-color: #A6E22E;
			}
		</style>
	</head>
	<body id="body">
		<div id="warp">warp
			<div id="inner1">inner1
				<div id="inner2">
					inner2
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" charset="utf-8">
		window.onload=function(){
			var warp = document.querySelector("#warp");
			var inner1 = document.querySelector("#inner1");
			var inner2 = document.querySelector("#inner2");
			console.log("================offsetParent===============")
			console.log(warp.offsetParent)
			console.log(inner1.offsetParent)
			console.log(inner2.offsetParent)
			console.log("=================offsetTop=============")
			console.log("warp===="+warp.offsetTop)
			console.log("inner1===="+inner1.offsetTop)
			console.log("inner2===="+inner2.offsetTop)
			}
	</script>
</html>

获取滚动条滚动时，元素滚动的距离

<!DOCTYPE html>
<html id="html">
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				overflow: scroll;
				height: 2000px;
				width:2000px;
			}
		</style>
	</head>
	<body id="body">
		<div id="warp">warp
			<div id="inner1">inner1
				<div id="inner2">
					inner2
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" charset="utf-8">
		window.onscroll=function(){
			//获取滚动条滚滚时，里面元素滚动的距离
			var L = document.documentElement.scrollLeft||document.body.scrollLeft
			var T = document.documentElement.scrollTop||document.body.scrollTop
			console.log(L,T)
		}
	</script>
</html>

获取某个元素相对于body的绝对位置和相对与视口的相对位置
以下都是针对margin 和 border为0的情况，如果有这些值，需要考虑这些值将其加起来
因为js的这几个定位都是针对于padding来计算，不会考虑margin和border
这个了解即可，因为接下来有个属性完美的帮我们计算相对位置和绝对位置

<!DOCTYPE html>
<html id="html">
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				overflow: scroll;
				height: 2000px;
				width:2000px;
			}
		</style>
	</head>
	<body id="body">
		<div id="warp">warp
			<div id="inner1">inner1
				<div id="inner2">
					inner2
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" charset="utf-8">
		window.onscroll=function(){
			var inner2=document.querySelector("#inner2");
			var Ab = getAb(inner2)//获取inner2对于body的绝对位置
			var Re = getRe(inner2)//获取inner2对于视口的相对位置
			
			console.log("相对于body的绝对定位===",Ab,"相对于视口的相对定位",Re)
			
			/* 获取绝对位置 */
			function getAb(node){
				let x = 0;
				let y = 0;
				while(node){
					/* 每次循环叠加 定位位置 */
					x += node.offsetLeft;
					y += node.offsetTop;
					
					node = node.offsetParent/* 获取父级元素，没有就是null，退出循环 */
				}
				return {x:x,y:y}
			}
			/* 获取相对位置 */
			function getRe(node){
				let x = 0;
				let y = 0;
				while(node){
					/* 每次循环叠加 定位位置 */
					x += node.offsetLeft;
					y += node.offsetTop;
					
					node = node.offsetParent/* 获取父级元素，没有就是null，退出循环 */
				}
				
				//获取滚动条滚滚时，里面元素滚动的距离
				var L = document.documentElement.scrollLeft||document.body.scrollLeft
				var T = document.documentElement.scrollTop||document.body.scrollTop
				
				return {x:x-L,y:y-T}
			}
		}
	</script>
</html>

获取元素大小以及其相对于视口的位置，和绝对位置
getBoundingClientRect()函数会帮我们自动考虑margin和border计算出相对位置
它会给你返回一系列值
width 和 height是元素的border-box，就是盒子整个大小，包括border和margin
这两个属性有什么用呢？就是如果我们想要右上角和左下角的时候可以通过加减width和height这两个值来获取
left和top是元素左上角相对于视口左上角的位置
right和bottom是元素右下角相对于视口左上角的位置

<!DOCTYPE html>
<html id="html">
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				overflow: scroll;
				height: 2000px;
				width:2000px;
			}
		</style>
	</head>
	<body id="body">
		<div id="warp">warp
			<div id="inner1">inner1
				<div id="inner2">
					inner2
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" charset="utf-8">
		window.onscroll=function(){
			var inner2 = document.querySelector("#inner2")
			var Re = inner2.getBoundingClientRect();
			console.log("相对位置为：",Re)
			
			//获取滚动条滚滚时，里面元素滚动的距离
			var L = document.documentElement.scrollLeft||document.body.scrollLeft
			var T = document.documentElement.scrollTop||document.body.scrollTop
			
			console.log("绝对位置为",Re.top+T,Re.left+L)
		}
	</script>
</html>

clientWidth，clientHeight和offsetWidth，offsetHeight的区别

<!DOCTYPE html>
<html id="html">
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#warp{
				width: 200px;
				height: 200px;
				padding: 50px;
				border: #000000 solid 20px;
				margin: 100px;
			}
		</style>
	</head>
	<body id="body">
		<div id="warp"></div>
	</body>
	<script type="text/javascript" charset="utf-8">
		window.onload=function(){
			var warp = document.querySelector("#warp")
			console.log("获取元素可视区域的宽度 就是内边距+元素width",warp.clientWidth)
			console.log("获取元素可视区域+边框的宽度",warp.offsetWidth)
		}
	</script>
</html>

获取视口大小
有两个专门获取视口大小的属性，具体看代码

<!DOCTYPE html>
<html id="html">
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#warp{
				width: 200px;
				height: 200px;
				padding: 50px;
				border: #000000 solid 20px;
				margin: 100px;
			}
		</style>
	</head>
	<body id="body">
		<div id="warp"></div>
	</body>
	<script type="text/javascript" charset="utf-8">
		window.onload=function(){
			var w = document.documentElement.clientWidth/* 获取视口的宽度 */
			var h = document.documentElement.clientHeight/* 获取视口的高度 */
			console.log(w,h)
		}
	</script>
</html>

2、mac停靠栏

在这里插入图片描述

随便找5个png图片，要128*128的

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{/* 清除样式 */
				padding: 0;
				margin: 0;
			}
			html,body{/* 消除默认滚动条 */
				height: 100%;
				overflow: hidden;
			}
			#warp > img{
				width: 65px;
			}
			#warp{
				position: absolute;/* 设置绝对定位后，div将不再独占一行 */
				bottom: 0;/* 让其在底部 */
				left: 0;/* 靠左 */
				/* 让内容居中 */
				width: 100%;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="warp">
			<img src="image/1.png" >
			<img src="image/2.png" >
			<img src="image/3.png" >
			<img src="image/4.png" >
			<img src="image/5.png" >
		</div>
	</body>
	<script type="text/javascript" charset="utf-8">
		window.onload=function(){
			let r = 128;/* 设定半径为130，只要鼠标在半径130范围内，图片做出响应 */
			
			let img_all = document.querySelectorAll("#warp > img");/* 获取warp下面所有img元素 */
			
			document.onmousemove=function(ev){/* 鼠标移动触发 给document视窗加事件 传入鼠标信息*/
				ev = ev||event;
				
				for(let i = 0;i < img_all.length;i++){
					/* getBoundingClientRect()获取元素相对视口位置,left 和 top 是左上角相对位置
					   offsetWidth 获取元素可视区域宽度，内边距+width
					   
					   上面两个相加为元素右下角相对视口位置
					   那么如果我们想获取元素正中心对应视口的相对位置呢？
						offsetWidth/2就正好是元素半径
						
					   getBoundingClientRect()+offsetWidth/2就是元素正中心对应视口的相对位置
					   
					   如何计算元素对于当前鼠标的相对位置呢
					   就用刚刚计算的相对视口位置 - 鼠标对于视口的位置就可以了
					 */
					let x = img_all[i].getBoundingClientRect().left + img_all[i].offsetWidth/2 - ev.clientX;/* 获取元素中心对应鼠标的x轴相对位置 */
					let y = img_all[i].getBoundingClientRect().top + img_all[i].offsetHeight/2 - ev.clientY;/* 获取元素中心对应鼠标的y轴相对位置 */
					
					/* 有了横纵位置（距离），就可以通过勾股定理来算出斜边，这样就有了一个圆形的范围，而不是只有移到特定的x和y轴正对住才有效果 */
					let c = Math.sqrt(x*x,y*y);/* 勾股定理，根号下(a²+b²) */
					
					/* 让x和y在300时才生效 */
					if(x > 300 || y > 300){
						c=r
					}
					
					/* 如果c的值<130 也就是进入了我们设定的半径，让图片慢慢变大 */
					if(c>=r){
						c=r;
					}
					 /* 设置最大只能到130px c的值会根据距离元素相对位置的缩小二变的越来越小
						此时130减去的数就越来越小（130-(130*0.5)=65,130-(120*0.5)=70），那么宽度就越来越大
						所以我们需要考虑的就是，怎么减能让进入130的一刻，不发生突然变大变小，也就是刚进入130时，让大小正好为当前元素大小
						你会发现，我每个img大小为65，而当c为130时，也一样是65
					  */
					img_all[i].style.width=(130-c*0.5)+"px";
				}
			}
			
		}
	</script>
</html>

3、鼠标滚轮事件

###鼠标滚轮事件
	ie/chrome用: onmousewheel(dom0)
			获取向上滑还是向下滑的数值：event.wheelDelta
									上:120
									下: -120
	firefox用: DOMMouseScro11 (必须用dom2的标准模式)
			event.detaf
			上: -3
			下: 3
##阻止dom2的默认行为
	if(e.preventDefault){
		e.preventDefault();
	}
##阻止dom0的默认行为
	return false;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{/* 清除样式 */
				padding: 0;
				margin: 0;
			}
			html,body{/* 消除默认滚动条 */
				height: 2000px;
				overflow: scroll;
			}
			#warp{
				width: 100%;
				height: 200px;
				background-color: #000000;
			}
		</style>
	</head>
	<body>
		<div id="warp">
		</div>
	</body>
	<script type="text/javascript" charset="utf-8">
		window.onload=function(){
			let warp = document.querySelector("#warp");
			
			
			if(warp.addEventListener){/* 如果有 代表这是支持此事件绑定的浏览器，就是火狐 */
				/* 火狐浏览器 */
				warp.addEventListener("DOMMouseScroll",function(ev){
					ev=ev||event
					console.log("火狐浏览器 正在滚")
					console.log("滚轮滚动方向，下滑为正值，上滑为负值",ev.detail)
					if(ev.detail>0){
						warp.style.height=warp.offsetHeight+10+"px";
					}else{
						warp.style.height=warp.offsetHeight-10+"px";
					}
				})
			}
			/* 非火狐浏览器 */
			warp.onmousewheel=function(ev){
				ev=ev||event
				console.log("非火狐浏览器 正在滚")
				console.log("滚轮滚动方向，下滑为负值，上滑为正值",ev.wheelDelta)
				if(ev.wheelDelta>0){
					console.log(warp.offsetHeight)
					warp.style.height=(warp.offsetHeight - 10)+"px";
				}else{
					warp.style.height=warp.offsetHeight+10+"px";
				}
				
			/* 禁止事件默认行为，不设置会在我们向下滑动的时候，滚动条跟着动 */
				if(ev.preventDefault){/* 如果有这个函数，表示火狐 */
					/* dom2 火狐 */
					ev.preventDefault()
				}
				/* 非火狐禁用 */
				return false;
			}
		}
	</script>
</html>

4、曲线运动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#test{
				position: absolute;
				left: 200px;
				top: 300px;
				width: 10px;
				height: 10px;
				background: black;
			}
			
			.box{
				position: absolute;
				border: 1px solid;
			}
		</style>
	</head>
	<body>
		<div id="test"></div>
	</body>
	<script type="text/javascript">
		
		window.onload=function(){
			var testNode = document.querySelector("#test");/* 选择test节点 */
			var startX = testNode.offsetLeft;/* 获取相对位置，具体定位参考那个元素，请看前面的内容 */
			var startY = testNode.offsetTop;/* 获取纵向定位位置 */
			//角度
			var deg =0;
			var step = 100;//系数
			
			
			setInterval(function(){
				
				deg++;/* 让角度不断增加 */
				
				testNode.style.left = startX + (deg*Math.PI/180)*step/2 +'px';/* 定位元素，让其每次跟随角度定位 deg*π/180 是弧度*/
				testNode.style.top = startY + Math.sin( deg*Math.PI/180 )*step*2+"px";
				
				var boxNode = document.createElement("div");/* 创建一个div节点 */
				boxNode.classList.add("box");/* 为其设置一个class样式 */
				
				boxNode.style.left=testNode.offsetLeft+"px";/* 设置其定位为当前test元素的位置 */
				boxNode.style.top=testNode.offsetTop+"px";
				
				document.body.appendChild(boxNode);/* 将这个节点添加给body */
				
			},1000/60)
		}
		
		
	</script>
</html>

5、气泡效果

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				overflow: hidden;
				height: 100%;
			}
			body{
				background-color: pink;
			}
			canvas{
				/* 居中方案 */
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				background-color: white;
				/* 记住canvas画布拥有独有的width 和 height，需要用这俩属性来设置画布大小，这俩属性写标签中 */
			}
		</style>
	</head>
	<body>
		<canvas height="600" width="600"></canvas><!-- 画布需要在这里设置大小 -->
	</body>
	<script type="text/javascript">
		
		window.onload=function(){
			
			let oc = document.querySelector("canvas")/* 获取canvas节点 */
			
			if(oc.getContext){/* 如果为true 表示获取到了画布容器 */
			
				let ctx = oc.getContext("2d")/* 获取2d容器 */
				
				let arr = [];/* 定义一个数组用来存储多个随机圆 */
				
				/* 向arr中注入随机圆 */
				setInterval(function(){
					/* 生成随机圆心的位置 */
					let x = Math.random()*oc.width;
					let y = Math.random()*oc.height;
					
					/* 半径 */
					let r = 10;
					
					/* 随机颜色和透明度 */
					let red = Math.round(Math.random()*255)
					let green = Math.round(Math.random()*255)
					let blue = Math.round(Math.random()*255)
					let alp = 1;
					
					/* 注入 */
					arr.push({
						x:x,
						y:y,
						r:r,
						red:red,
						green:green,
						blue:blue,
						alp:alp
					})
				},300)
				
				/* 绘制圆 */
				setInterval(function(){
					ctx.clearRect(0,0,oc.width,oc.height)/* 将画布擦掉 ,不擦上一帧的痕迹永远保留*/
					
					for(let i = 0;i<arr.length;i++){/* 每次进入都将半径增加 */
						a=arr[i]/* 获取当前遍历对象 */
						
						a.r++/* 半径自增 */
						a.alp -= 0.01/* 透明度自减，越来越透明 */
						
						if(a.alp === 0){/* 当透明度为0时，清除此数组元素 */
							arr.splice(i,1);
						}
						
					}
					
					/* 将数组中的圆绘制到容器中 */
					for(let i = 0;i<arr.length;i++){
						let a=arr[i];
						ctx.save();							/* 保存当前环境的状态 */
						ctx.beginPath();					/* 起始一条路径，或重置当前路径 */
						ctx.arc(a.x,a.y,a.r,0,2*Math.PI)	/* 生成一个圆，半径为10 创建弧/曲线（用于创建圆形或部分圆）*/
						ctx.fillStyle="rgba("+a.red+","+a.green+","+a.blue+","+a.alp+")"/* 设置或返回用于填充绘画的颜色、渐变或模式 */
						// ctx.stroke() 					绘制已定义的路径
						// ctx.restore(); 					返回之前保存过的路径状态和属性
						ctx.fill();							/* 绘制图形 */
					}
					
				},7)
			}
			
		}
		
		
	</script>
</html>

6、曲线运动的气泡效果

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				overflow: hidden;
				height: 100%;
			}
			body{
				background-color: pink;
			}
			canvas{
				/* 居中方案 */
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				background-color: white;
				/* 记住canvas画布拥有独有的width 和 height，需要用这俩属性来设置画布大小，这俩属性写标签中 */
			}
		</style>
	</head>
	<body>
		<canvas height="600" width="270"></canvas><!-- 画布需要在这里设置大小 -->
	</body>
	<script type="text/javascript">
		
		window.onload=function(){
			
			let oc = document.querySelector("canvas")/* 获取canvas节点 */
			
			if(oc.getContext){/* 如果为true 表示获取到了画布容器 */
			
				let ctx = oc.getContext("2d")/* 获取2d容器 */
				
				let arr = [];/* 定义一个数组用来存储多个随机圆 */
				
				/* 向arr中注入随机圆 */
				setInterval(function(){
					/* 半径 */
					let r = Math.random()*7+2;//让半径随机生成在2~10
					
					/* 生成随机圆心的位置 */
					let x = Math.random()*oc.width;
					let y = oc.height-r;
					
					/* 随机颜色和透明度 */
					let red = Math.round(Math.random()*255)
					let green = Math.round(Math.random()*255)
					let blue = Math.round(Math.random()*255)
					let alp = 1;
					
					/* 做曲线运动需要的属性 */
					let deg=0;//初始角度为0
					let startX=x;//初始横轴为圆心位置
					let startY=y;//初始纵轴为圆心位置
					let step = Math.random()*25+15;//系数为10~20之间
					/* 注入 */
					arr.push({
						x:x,
						y:y,
						r:r,
						red:red,
						green:green,
						blue:blue,
						alp:alp,
						deg:deg,
						startX:startX,
						startY:startY,
						step:step
					})
				},150)
				
				/* 绘制圆 */
				setInterval(function(){
					ctx.clearRect(0,0,oc.width,oc.height)/* 将画布擦掉 ,不擦上一帧的痕迹永远保留*/
					
					for(let i = 0;i<arr.length;i++){/* 每次进入都将半径增加 */
						a=arr[i]/* 获取当前遍历对象 */
						
						a.deg+=5;/* 角度自增 */
						a.x = a.startX + Math.sin(a.deg*Math.PI/180)*a.step*2;/* 设置圆心生成位置的曲线 */
						a.y = a.startY - (a.deg*Math.PI/180)*a.step;
						
						if(a.y<=200){
							arr.splice(i,1)/* 如果到了一定位置，清除这个元素 */
						}
					}
					
					/* 将数组中的圆绘制到容器中 */
					for(let i = 0;i<arr.length;i++){
						let a=arr[i];
						ctx.save();							/* 保存当前环境的状态 */
						ctx.beginPath();					/* 起始一条路径，或重置当前路径 */
						ctx.arc(a.x,a.y,a.r,0,2*Math.PI)	/* 生成一个圆，半径为10 创建弧/曲线（用于创建圆形或部分圆）*/
						ctx.fillStyle="rgba("+a.red+","+a.green+","+a.blue+","+a.alp+")"/* 设置或返回用于填充绘画的颜色、渐变或模式 */
						// ctx.stroke() 					绘制已定义的路径
						// ctx.restore(); 					返回之前保存过的路径状态和属性
						ctx.fill();							/* 绘制图形 */
					}
					
				},9)
			}
			
		}
		
		
	</script>
</html>

二、实战

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/* scc reset start*/
			html,body,h1,h2,h3,h4,h5,h6,p,ul,li{
				margin: 0;
				padding: 0;
				font: 0.875rem "微软雅黑";
			}
			html,body{/* 禁用滚动条 */
				overflow: hidden;
				height: 100%;
			}
			a{
				text-decoration: none;/* 清除下划线 */
				display: block;/* 设置为盒子 */
			}
			li{
				list-style: none;/* 清除样式 */
			}
			img{
				display: block;/* 盒子 */
			}
			/* css reset end */
			
			/* common css start */
			.commonTitle{/* 通用大号文本样式 */
				color: #009ee0;
				font-size: 80px;
				line-height: 0.8;
				font-weight: bold;/* 粗体 */
				letter-spacing: -5px;/* 字母间距 */
			}
			.commonText{/* 通用小号文本样式 */
				color: white;
				line-height: 1.5;
				font-size: 15px;
			}
			.clearfix{/* 清除浮动 解决高度塌陷 */
				*zoom: 1;
			}
			.clearfix:after{/* 清除浮动 解决高度塌陷 */
				content:"";
				display: block;
				clear: both;
			} 
			/* common css end */
			
			/* header css start */
			#header{
				background-color: white !important;
			}
			#header .header_main{
				/* 尺寸 */
				width: 1100px;
				height: 80px;
				/* 居中 */
				margin: 0 auto;
				/* 开启定位 */
				position: relative;
			}
			#header .header_main > .logo{
				float: left;
				margin-top: 30px;
			}
			#header .header_main > nav{
				float: right;
				margin-top: 50px;
			}
			#header .header_main > nav > .list > li{/* 觉得这么写很麻烦？是因为我一直使用less 模块化思维很重要 */
				float: left;
				margin-left: 40px;
				
				position: relative;/* 让子元素定位参照我 */
			}
			#header .header_main > nav > .list > li .up{
				color: #000000;
				position: absolute;/* 绝对定位，使up（上面的）浮动起来，让下面的正好和up重合 */
				
				width: 0;
				overflow: hidden;
				
				transition: 1s width; 
			}
			#header .header_main > nav > .list > li:hover .up{
				width:100%;
			}
			#header .header_main > .arrow{
				width: 21px;
				height: 11px;
				background-image:url(img/menuIndicator.png) ;
				
				position: absolute;
				z-index: 2;
				left: 50%;
				bottom: -11px;
				
				transition: 1s;
			}
			/* header css end */
			
			/* content css start */
			#content{background-color: white !important;position: relative; overflow:hidden;widht:100%;}
			#content > .list{position: absolute;width: 100%;transition: 1s top;}
			#content > .list > li{position: relative;background-position: 50% 50% !important;}
			#content > .list > li > section{width: 1100px;height:520px;margin: auto;position: absolute;top: 0;left: 0;right: 0;bottom: 0;}
			/* 第一屏 */
			#content > .list > .home{background: url(img/bg1.jpg) no-repeat;}
			#content > .list > .home .home_list_item{width: 100%;height: 100%;perspective: 1000px;transform-style: preserve-3d;}
			#content > .list > .home .home_list_item > li{width: 100%;height: 100%;position: absolute;left: 0;top: 0;bottom: 0;right: 0;
				visibility: hidden;/* 使元素不可见，但不消灭，就是还在页面仅仅看不见而已 */}
			#content > .list > .home .home_list_item > li:nth-child(1){background: #dc6c5f;}
			#content > .list > .home .home_list_item > li:nth-child(2){background: #95dc84;}
			#content > .list > .home .home_list_item > li:nth-child(3){background: #64b9d2;}
			#content > .list > .home .home_list_item > li:nth-child(4){background: #000000;}
			#content > .list > .home .home_list_item > li.active{visibility: visible;}
			#content > .list > .home .home_list_item > li > div{color: white;text-align: center;margin-top:200px;}
			#content > .list > .home .home_list_selector{position: absolute;left: 0;right: 0;bottom:0;text-align: center;}
			#content > .list > .home .home_list_selector > li{cursor: pointer;border-radius: 50%;width: 20px;height: 20px;display: inline-block;background-color:rgba(255,255,255,0.5);box-shadow: 5px 5px 15px rgba(0,0,0,0.5);}
			#content > .list > .home .home_list_selector > li.active{background-color: white;cursor: default;}
			.leftHidden{visibility: hidden;animation: leftHidden 0.7s 1 linear;}
			.rightShow{visibility: visible;animation: rightShow .7s 1 linear;}
			@keyframes leftHidden{
				0%{visibility: visible;}
				50%{transform: translateX(-40%) rotateY(30deg) scale(.8);}
				100%{transform: translateZ(-200px);}
			}
			@keyframes rightShow{
				0%{visibility: hidden;transform: translateZ(-200px);}
				50%{transform: translateX(40%) rotateY(-30deg) scale(.8);}
				100%{visibility:visible;}
			}
			.leftShow{visibility: hidden;animation: leftShow 0.7s 1 linear;}
			.rightHidden{visibility: visible;animation: rightHidden .7s 1 linear;}
			@keyframes leftShow{
				0%{visibility: hidden;transform: translateZ(-200px);}
				50%{transform: translateX(-40%) rotateY(30deg) scale(.8);}
				100%{visibility: visible}
			}
			@keyframes rightHidden{
				0%{visibility:visible;}
				50%{transform: translateX(40%) rotateY(-30deg) scale(.8);}
				100%{visibility: hidden;transform: translateZ(-200px);}
			}
			/* 第二屏 */
			#content > .list > .course{background: url(img/bg2.jpg) no-repeat;position: relative;}
			#content > .list > .course .course_header{margin: 50px}
			#content > .list > .course .course_text{margin-left: 50px;width: 400px;}
			#content > .list > .course .course_photo_wall{width: 480px;position: absolute;top: 70px;right: 50px;}
			#content > .list > .course .course_photo_wall .item{width: 120px;height: 132px;float: left;position: 
				relative;perspective: 500px;/* 给景深，让里面的动画有3d效果 */
				transform-style: preserve-3d;/* 3d动画 */}
			#content > .list > .course .course_photo_wall .line{position: absolute;top:-7px;width: 9px;height: 410px;background: url(img/plus_row.png) no-repeat;}
			#content > .list > .course .course_photo_wall .line:nth-of-type(1){left: -5px;}
			#content > .list > .course .course_photo_wall .line:nth-of-type(2){left: 115px;}
			#content > .list > .course .course_photo_wall .line:nth-of-type(3){left: 235px;}
			#content > .list > .course .course_photo_wall .line:nth-of-type(4){left: 355px;}
			#content > .list > .course .course_photo_wall .line:nth-of-type(5){left: 475px;}
			#content > .list > .course .course_photo_wall .item > div{position: absolute;left: 0;top: 0;bottom: 0;right: 0;box-sizing: border-box;padding: 15px;transition: 1s transform;}
			#content > .list > .course .course_photo_wall .item:nth-of-type(1) > .backFace{background: url(img/binoli.png) no-repeat;}
			#content > .list > .course .course_photo_wall .item:nth-of-type(2) > .backFace{background: url(img/bks.png) no-repeat;}
			#content > .list > .course .course_photo_wall .item:nth-of-type(3) > .backFace{background: url(img/gu.png) no-repeat;}
			#content > .list > .course .course_photo_wall .item:nth-of-type(4) > .backFace{background: url(img/hlx.png) no-repeat;}
			#content > .list > .course .course_photo_wall .item:nth-of-type(5) > .backFace{background: url(img/lbs.png) no-repeat;}
			#content > .list > .course .course_photo_wall .item:nth-of-type(6) > .backFace{background: url(img/leonberg.png) no-repeat;}
			#content > .list > .course .course_photo_wall .item:nth-of-type(7) > .backFace{background: url(img/pcwelt.png) no-repeat;}
			#content > .list > .course .course_photo_wall .item:nth-of-type(8) > .backFace{background: url(./img/tata.png) no-repeat;}
			#content > .list > .course .course_photo_wall .item:nth-of-type(9) > .backFace{background: url(img/binoli.png) no-repeat;}
			#content > .list > .course .course_photo_wall .item:nth-of-type(10) > .backFace{background: url(img/gu.png) no-repeat;}
			#content > .list > .course .course_photo_wall .item:nth-of-type(11) > .backFace{background: url(./img/tata.png) no-repeat;}
			#content > .list > .course .course_photo_wall .item:nth-of-type(12) > .backFace{background: url(img/pcwelt.png) no-repeat;}
			#content > .list > .course .course_photo_wall .item > .face{background-color: #009ee0;color: white;
				transform: rotateY(180deg);/* 转180度，把背面露出来 */
				backface-visibility: hidden;/* 隐藏背面 */
			}
			#content > .list > .course .course_photo_wall .item:hover > .face{transform: rotateY(360deg);}
			#content > .list > .course .course_photo_wall .item > .backFace{background-position: 50% 50% !important;}
			#content > .list > .course .course_photo_wall .item:hover > .backFace{transform: rotateY(180deg);}
			/* 第三屏 */
			#content > .list > .works{background: url(img/bg3.jpg) no-repeat;}
			
			#content > .list > .works .works_header{margin: 50px 0px 100px 50px;}
			#content > .list > .works .works_list{margin-left: 50px;}
			#content > .list > .works .works_list > .list_item{float: left;width: 220px;height: 133px;margin:0px 4px;position: relative;overflow: hidden;}
			#content > .list > .works .works_list > .list_item:last-child{width: 332px;}
			#content > .list > .works .works_list > .list_item > .mask{position: absolute;left: 0;right: 0;top: 0;bottom: 0;
				box-sizing: border-box;padding: 10px;/* box-sizing: border-box;是内边距等在已有范围内绘制，而不影响布局 */	
				color:white;background-color: #000000; opacity: 0;transition: 0.5s opacity;
			}
			#content > .list > .works .works_list > .list_item > img{transition: 0.5s transform;}
			#content > .list > .works .works_list > .list_item:hover > img{transform: rotate(20deg) scale(1.5);}
			#content > .list > .works .works_list > .list_item:hover > .mask{opacity:0.6;}
			#content > .list > .works .works_list > .list_item > .mask > .icon{width: 32px;height: 34px;margin: 0 auto;margin-top: 10px;
				background: url(img/zoomico.png) no-repeat;transition: 0.5s background-position;}
			#content > .list > .works .works_list > .list_item > .mask > .icon:hover{background-position:0px -35px;/* 背景上移 */}
			#content > .list > .works .robot{width: 167px;height: 191px;background: url(img/robot.png) no-repeat;position: absolute;left:900px;top: 170px;
				animation: robotMove 3s linear infinite;/* 动画，3秒完成 线性播放，一直循环 */
			}
			@keyframes robotMove{
				49%{
					transform: translateX(-300px) rotateY(0deg);
				}
				50%{
					transform:  translateX(-300px) rotateY(180deg);
				}
				99%{
					transform:  translateX(0px) rotateY(180deg);
				}
				100%{
					transform:  translateX(0px) rotateY(0deg);
				}
			}
			/* 第四屏 */
			#content > .list > .about{background: url(img/bg4.jpg) no-repeat;position: relative;}
			#content > .list > .about .about_header{margin: 50px 0px 100px 50px;}
			#content > .list > .about .about_text{margin-left: 50px;width: 400px;}
			#content > .list > .about .about_line{width: 357px;height: 998px;position: absolute;left: 50%;top: -100px;
				background:url(img/greenLine.png) no-repeat;}
			#content > .list > .about .about_photo > .item{width: 260px;height: 200px;border: rgba(0,0,0,0.5) 5px solid;border-radius: 8px;
				position: absolute;z-index: 2;overflow: hidden;}
			#content > .list > .about .about_photo > .item:nth-child(1){left: 750px;top: 50px;}
			#content > .list > .about .about_photo > .item:nth-child(2){left: 600px;top: 290px;}
			#content > .list > .about .about_photo > .item > span,#content > .list > .about .about_photo > .item > ul{
				position: absolute;left: 0;top: 0;bottom: 0;right: 0;}
			#content > .list > .about .about_photo > .item > ul > li{float: left;position: relative;
				overflow: hidden;}
			#content > .list > .about .about_photo > .item > ul > li > img{float: left;position: absolute;transition: 1s left,1s top;}
			#content > .list > .about .about_photo > .item:nth-child(1) > span{background: url(img/about2.jpg) no-repeat;transform: scale(2);transition: 1s transform;}
			#content > .list > .about .about_photo > .item:nth-child(2) > span{background: url(img/about4.jpg) no-repeat;transform: scale(2);transition: 1s transform;}
			#content > .list > .about .about_photo > .item:hover > span{transform: scale(1);}
			/* 第五屏 */
			#content > .list > .team{background: url(img/bg5.jpg) no-repeat;position: relative;}
			#content > .list > .team .team_header,#content > .list > .team .team_text{width: 400px;margin: 50px;float: left;}
			#content > .list > .team .team_text{float: right !important;}
			#content > .list > .team .team_people{width: 944px;height: 448px;position: absolute;
				bottom: 0;left: 0;right: 0;top: 550px;margin: auto;}
			#content > .list > .team .team_people > li{width: 118px;height: 100%;background: url(img/team.png) no-repeat;float: left;
				transition: 1s opacity;}
			#content > .list > .team .team_people > li:nth-child(1){background-position: 0,0;}
			#content > .list > .team .team_people > li:nth-child(2){background-position: -118px,0;}
			#content > .list > .team .team_people > li:nth-child(3){background-position: -236px,0;}
			#content > .list > .team .team_people > li:nth-child(4){background-position: -354px,0;}
			#content > .list > .team .team_people > li:nth-child(5){background-position: -472px,0;}
			#content > .list > .team .team_people > li:nth-child(6){background-position: -590px,0;}
			#content > .list > .team .team_people > li:nth-child(7){background-position: -708px,0;}
			#content > .list > .team .team_people > li:nth-child(8){background-position: -826px,0;}
			
			/* 右侧圆点导航 */
			#content > .dot{position: fixed;right: 5px;top: 50%;}
			#content > .dot > li{width: 20px;height: 20px;
				background-color: rgba(255,255,255,0.5);box-shadow: 5px 5px 15px rgba(0,0,0,0.5);
				margin-top: 10px;border-radius: 50%;cursor: pointer;}
			#content > .dot > li.active{background-color: white;cursor: default;}
			/* content css end */
		</style>
	</head>
	<body>
		<section id="warp"><!-- h5中的新标签，用来规定一个页眉、页脚或者一个段落 -->
			<!-- 流体布局 两边的内容-->
			<!-- 头部 -->
			<header id="header">
				<!-- 固定布局 实际内容-->
				<div class="header_main">
					<!-- logo -->
					<h1 class="logo">
						<a href="javascript:;">
							<img src="img/logo.png" >
						</a>
					</h1>
					<!-- 导航条 -->
					<nav><!-- H5新标签 用来定义导航链接部分 -->
						<ul class="list clearfix">
							<li>
								<a href="javascript:;"><!-- 这里每个a标签代表一个导航，放上下两个元素，为了做鼠标移入变色的动画 -->
									<div class="up"><img src="./img/home_gruen.png" ></div>
									<div class="dpwn"><img src="img/home.png" ></div><!-- 初始宽度为0，鼠标移入宽度变为100% -->
								</a>
							</li>
							<li>
								<a href="javascript:;">
									<div class="up">Course</div>
									<div class="dpwn">Course</div>
								</a>
							</li>
							<li>
								<a href="javascript:;">
									<div class="up">Works</div>
									<div class="dpwn">Works</div>
								</a>
							</li>
							<li>
								<a href="javascript:;">
									<div class="up">About</div>
									<div class="dpwn">About</div>
								</a>
							</li>
							<li>
								<a href="javascript:;">
									<div class="up">Team</div>
									<div class="dpwn">Team</div>
								</a>
							</li>
						</ul>
					</nav>
					<div class="arrow"></div>
				</div>
			</header>
			<!-- 内容区 -->
			<section id="content">
				<ul class="list">
					<li class="home">
						<section>
							<ul class="home_list_item commonTitle">
								<li class="active">
									<div class="item commonTitle">one layer</div>
								</li>
								<li>
									<div class="item commonTitle">two layer</div>
								</li>
								<li>
									<div class="item commonTitle">three layer</div>
								</li>
								<li>
									<div class="item commonTitle">four layer</div>
								</li>
							</ul>
							<ul class="home_list_selector">
								<li class="active"></li>
								<li></li>
								<li></li>
								<li></li>
							</ul>
						</section>
					</li>
					<li class="course">
						<section>
							<header class="course_header commonTitle">
								<span>EINIGE</span><br>
								<span>UNSERER</span><br>
								<span>KUNDEN</span><br>
							</header>
							<div class="course_text">
								<p class="commonText">
									Das Kundenvertrauen in unsere Kompetenz ist die notwendige Basis einer erfolgreichen Zusammenarbeitgleichzeitig aber auch das groBte Lob, das man unsentgegenbringen kann.
									<br/>
									Diese und viele weitere groBe und kleine Kunden vertrauen uns seit Jahren, was uns stolz macht, unddafur sagen wir an dieser Stelle einfach mal.
								</p>
							</div>
							<div class="course_photo_wall clearfix">
								<span class="line"></span>
								<span class="line"></span>
								<span class="line"></span>
								<span class="line"></span>
								<span class="line"></span>
								<div class="item">
									<div class="backFace"></div>
									<div class="face">测试文字</div>
								</div>
								<div class="item">
									<div class="backFace"></div>
									<div class="face">测试文字</div>
								</div>
								<div class="item">
									<div class="backFace"></div>
									<div class="face">测试文字</div>
								</div>
								<div class="item">
									<div class="backFace"></div>
									<div class="face">测试文字</div>
								</div>
								<div class="item">
									<div class="backFace"></div>
									<div class="face">测试文字</div>
								</div>
								<div class="item">
									<div class="backFace"></div>
									<div class="face">测试文字</div>
								</div>
								<div class="item">
									<div class="backFace"></div>
									<div class="face">测试文字</div>
								</div>
								<div class="item">
									<div class="backFace"></div>
									<div class="face">测试文字</div>
								</div>
								<div class="item">
									<div class="backFace"></div>
									<div class="face">测试文字</div>
								</div>
								<div class="item">
									<div class="backFace"></div>
									<div class="face">测试文字</div>
								</div>
								<div class="item">
									<div class="backFace"></div>
									<div class="face">测试文字</div>
								</div>
								<div class="item">
									<div class="backFace"></div>
									<div class="face">测试文字</div>
								</div>
							</div>
						</section>
					</li>
					<li class="works">
						<section>
							<header class="works_header commonTitle">
								<span>ENIBLICK</span><br>
								<span>ERKENNTNIS</span><br>
								<span>ERGEBNIS</span><br>
							</header>
							<div class="works_list clearfix">
								<div class="list_item">
									<img src="img/worksimg1.jpg" />
									<div class="mask">
										<span>测试文字</span>
										<div class="icon"></div>
									</div>
								</div>
								<div class="list_item">
									<img src="img/worksimg2.jpg" />
									<div class="mask">
										<span>测试文字</span>
										<div class="icon"></div>
									</div>
								</div>
								<div class="list_item">
									<img src="img/worksimg3.jpg" />
									<div class="mask">
										<span>测试文字</span>
										<div class="icon"></div>
									</div>
								</div>
								<div class="list_item">
									<img src="img/worksimg4.jpg" />
									<div class="mask">
										<span>测试文字</span>
										<div class="icon"></div>
									</div>
								</div>
							</div>
							<div class="robot">
								
							</div>
						</section>
					</li>
					<li class="about">
						<section>
							<header class="about_header commonTitle">
								<span>DIE</span><br>
								<span>SPEZIELLE</span><br>
								<span>VIELFALT</span><br>
							</header>
							<div class="about_text commonText">
								<p>
									Das Kundenvertrauen in unsere Kompetenz ist die notwendige Basis einer erfolgreichen Zusammenarbeitgleichzeitig aber auch das groBte Lob, das man unsentgegenbringen kann.
									<br>
									Diese und viele weitere groBe und kleine Kunden vertrauen uns seit Jahren, was uns stolz macht, unddafur sagen wir an dieser Stelle einfach mal.
								</p>
							</div>
							<div class="about_photo">
								<div class="item">
									<span></span>
									<ul data-src="img/about1.jpg"></ul><!-- data-src图片懒加载 -->
								</div>
								<div class="item">
									<span></span>
									<ul data-src="img/about3.jpg"></ul>
								</div>
							</div>
							<div class="about_line"></div>
						</section>
					</li>
					<li class="team">
						<section>
							<header class="team_header commonTitle">
								<span>WIR SIND</span><br>
								<span>VOXELAIR</span><br>
							</header>
							<div class="team_text commonText">
								<p>
									Das Kundenvertrauen in unsere Kompetenz ist die notwendige Basis einer erfolgreichen Zusammenarbeitgleichzeitig aber auch das groBte Lob, das man unsentgegenbringen kann.
									<br>
									Diese und viele weitere groBe und kleine Kunden vertrauen uns seit Jahren, was uns stolz macht, unddafur sagen wir an dieser Stelle einfach mal.
								</p>
							</div>
							<ul class="team_people">
								<li></li>
								<li></li>
								<li></li>
								<li></li>
								<li></li>
								<li></li>
								<li></li>
								<li></li>
							</ul>
						</section>
					</li>
				</ul>
				<ul class="dot">
					<li class="active"></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</section>
		</section>
	</body>
	<script type="text/javascript">
		window.onload=function(){/* 页面加载事件回调函数 */
		
			 /* ========================公有函数============================*/
			 /* 获取DOM节点 */
			 function getDOM(query){
				return document.querySelector(query)
			 }
			 /* 获取DOM节点列表数组 */
			 function getDOMAll(query){
			 	return document.querySelectorAll(query)
			 }
			 /* =============================头部====================================== */
			 
			 /* 获取dom元素 */
			 let header_arrow = getDOM("#header .header_main > .arrow")//获取角标
			 let header_li_all= getDOMAll("#header .header_main > nav > .list > li")//获取li
			 let header_li_up_all= getDOMAll("#header .header_main > nav > .list > li .up")//获取up
			 
			 /* 初始效果*/
			 
			 /* 让角标初始位置在第一个li */
			 header_arrow.style.left=header_li_all[0].offsetLeft + header_li_all[0].offsetWidth/2 - header_arrow.offsetWidth/2 +"px";
			 header_li_up_all[0].style.width="100%";/* 如果为0最好直接写空串 */
			 
			 /* ========================================内容区========================================== */
			 /* 获取Dom节点 */
			 let header = getDOM("#header")
			 let content = getDOM("#content")
			 let content_li_all = getDOMAll("#content > .list > li")
			 let content_list = getDOM("#content .list")
			 let dot_li_all = getDOMAll("#content > .dot > li");//获取所有li
			 contentBind();
			 /* 初始化内容区 */
			 function contentBind(){
				 /* document.documentElement.clientHeight  获取视口大小
					header.offsetHeight 是头部的box-border（可视区域大小+边框，可视区域为内容区+padding）
					header.offsetHeight 可以用header.getBoundingClientRect().height,这个会计算margin，但是我们这里header没有margin，所以
					少些一个字母是一个
					
					将内容区大小设置为视口大小-头部大小
				  */
				 content.style.height=document.documentElement.clientHeight - header.offsetHeight + "px";
				 
				 for(let i = 0;i < content_li_all.length;i++){
					 content_li_all[i].style.height=document.documentElement.clientHeight - header.offsetHeight + "px";
				 }
			 }
			 
			 let flag=0;/* 用来记录当前点击的是哪个li导航 */
			
			/* 导航动画 */
			for(let i = 0;i < header_li_all.length;i++){
				 /* 这里介绍一个转绑 因为js是异步执行，所以下面使用i可能出现异步不同步情况，此时
					let index = i
					然后下面的事件绑定中写
					header_li_up_all[this.index]      this表示当前对象，如果写在下面就是 header_li_all[i]
					此时就可以解决异步不同步了
					
					我这里没有用这个，因为我上面已经声明了，这里不会出现异步不同步
				 */
				 header_li_all[i].onclick=function(){
					 flag=i;/* 获取当前点击导航下标 */
					 move(flag);
				 }
			}
			/* ==========================右侧圆点导航================================== */
			dot();
			function dot(){
				for(let i = 0;i < dot_li_all.length;i++){
					let index=i;//绑定
					dot_li_all[i].onclick=function(){
						
						for(let j = 0;j < dot_li_all.length;j++){//清除所有激活样式
							dot_li_all[j].classList.remove("active")
						}
						this.classList.add("active");
						move(i)
					}
				}
			}
			/* 改变圆点显示 */
			function changeDot(){
				for(let j = 0;j < dot_li_all.length;j++){//清除所有激活样式
					dot_li_all[j].classList.remove("active")
				}
				dot_li_all[flag].classList.add("active")
			}
			function move(i){
				/* 先清除所有样式*/
				for(let i = 0;i < header_li_all.length;i++){
										 header_li_up_all[i].style.width="";
				}
				/* 我们想要让角标正好处于当前选中导航的正下方
										offsetLeft获取当前元素相对于父级的相对位置
										offsetWidth获取自己的的可视宽度 /2 正好是正中心
				 */
				header_arrow.style.left=header_li_all[i].offsetLeft + header_li_all[i].offsetWidth/2 - header_arrow.offsetWidth/2 +"px";
				header_li_up_all[i].style.width=100+"%";
				
				/* 控制内容区交互 */
				content_list.style.top=-i*(document.documentElement.clientHeight - header.offsetHeight)+"px";//向上滚动一屏
				flag = i;
				changeDot();
			}
			
			/* 缩小窗口后，重新设置内容区大小 */
			window.onresize=function(){
				contentBind();
				content_list.style.top=-flag*(document.documentElement.clientHeight - header.offsetHeight)+"px";//向上滚动一屏
				/* 小箭头 */
				header_arrow.style.left=header_li_all[flag].offsetLeft + header_li_all[flag].offsetWidth/2 - header_arrow.offsetWidth/2 +"px";
			}
			
			let timer=0;/* 保存时间函数索引 时间函数timer,用来对时间函数做操作 */
			/* 滚轮动画 */
			if(content.addEventListener){/* 火狐 */
				content.addEventListener("DOMMouseScroll",scrollFn);
				
			}
			
			/* 非火狐 */
			content.onmousewheel=scrollFn;
			
			function scrollFn(ev){
				ev= ev||event;
				
				if(ev.wheelDelta){/* 有就表示非火狐 */
					if(ev.wheelDelta>0){/* 大于0为上滑，向上滚 */
						scrollMoveFn(false);
					}else{
						scrollMoveFn(true)
					}
				}else{
					if(ev.detail>0){/* 火狐浏览器 >0 为下滑 */
						scrollMoveFn(true);
					}else{
						scrollMoveFn(false)
					}
				}
			}
			/* 滚轮移动逻辑 */
			function scrollMoveFn(b){/* b 为true 表示想要上滑 反之下滑*/
			
				/* 让滚轮事件被频繁触发的时候 move在150毫秒内只执行一次*/
				clearTimeout(timer)/* 通过时间函数id停止此时间函数 */
				timer = setTimeout(function(){
					move(flagFn(b))
				},150)
			}
			/* 规定flag的值不能小于0 大于4 true 表示加 false表示减*/
			function flagFn(b){
				if(b){
					return flag===4?flag=4:++flag;
				}else{
					return flag===0?flag=0:--flag;
				}
			}
			/* =============================第一屏 home============================ */
			/* 获取DOM节点 */
			let home_list_item_all = getDOMAll("#content > .list > .home .home_list_item > li")//轮播图
			let home_list_selector_all = getDOMAll("#content > .list > .home .home_list_selector > li")//按钮
			let bannerArea = getDOM("#content > .list > .home section")//轮播图区
			/* 3d效果 */
			let oldIndex = 0;/* 保存上次索引 */
			let autoIndex = 0;/* 保存自动轮播当前索引 */
			let autoBanner_timer = 0;/* 保存时间函数索引 时间函数timer,用来暂停时间函数 */
			home3d();
			function home3d(){
				/* 手动轮播 */
				for(let i = 0;i<home_list_selector_all.length;i++){
					home_list_selector_all[i].index=i;/* 获取当前索引 */
					home_list_selector_all[i].onclick=function(){
						for(let j = 0;j<home_list_selector_all.length;j++){/* 清除所有按钮初始样式 */
						
							if(this.index != oldIndex){/* 只有本次索引不等于上次索引才清除样式 */
								home_list_selector_all[j].classList.remove("active");/* 将active样式清除绑定 */
								home_list_item_all[j].classList.remove("active","rightShow","leftShow","leftHidden","rightHidden")
							}
							
						}
						this.classList.add("active");/* 将当前点击的按钮绑定active样式 */
						
						/* 如果当前索引 > 上次索引 就代表从左(隐藏)往右（显示） 否则从左(显示)往右（隐藏）*/
						if(this.index > oldIndex){
							home_list_item_all[i].classList.add("rightShow","active")/* 当前索引代表右边的 */
							home_list_item_all[oldIndex].classList.add("leftHidden")/* 上次索引代表左边的 */
						}else if(this.index < oldIndex){
							home_list_item_all[i].classList.add("rightHidden")/* 当前索引代表左边的 */
							home_list_item_all[oldIndex].classList.add("leftShow","active")/* 上次索引代表右边的 */
						}
						oldIndex=this.index;/* 让上次索引等于当前索引，本次点击索引是下次点击的上次索引 */
						autoIndex=this.index;/* 让自动轮播的索引=当前选中索引 */
						
					}
				}
				/* 自动轮播 */
				autoBanner();
				function autoBanner(){
					
					autoBanner_timer=setInterval(function(){
						for(let j = 0;j<home_list_selector_all.length;j++){/* 清除所有按钮初始样式 */
							home_list_selector_all[j].classList.remove("active");/* 将active样式清除绑定 */
							home_list_item_all[j].classList.remove("active","rightShow","leftShow","leftHidden","rightHidden")
						}
						if(autoIndex===home_list_item_all.length-1){/* 如果当前轮播索引为最后一个，让其等于0*/
							home_list_item_all[0].classList.add("rightShow","active")/* 第一个从右显示 */
							home_list_selector_all[0].classList.add("active");
							home_list_item_all[autoIndex].classList.add("leftHidden")/* 当前索引往左隐藏 */
							autoIndex=0;
						}else{
							home_list_item_all[autoIndex+1].classList.add("rightShow","active")/* 下一个从右显示 */
							home_list_selector_all[autoIndex+1].classList.add("active");
							home_list_item_all[autoIndex++].classList.add("leftHidden")/* 当前往左隐藏 */
						}
						oldIndex=autoIndex;/* 让上次索引等于当前自动索引 */
					},2000);
				}
				/* 鼠标移入轮播范围 */
				bannerArea.onmouseenter=function(){
					/*暂停自动轮播 */
					clearInterval(autoBanner_timer);
				}
				/* 鼠标移出轮播范围 */
				bannerArea.onmouseleave=function(){
					/* 上面暂停了自动轮播,现在重启自动轮播 */
					autoBanner();
				}
			}
			/* =========================第二，第三屏不需要js=========================== */
			
			/* =========================第四屏======================================== */
			/* 获取DOM节点 */
			let about_photo_ul_all =getDOMAll("#content > .list > .about .about_photo > .item > ul");//取得两个ul
			/* 图片炸裂效果 */
			picBoom()
			function picBoom(){
				for(let i = 0;i < about_photo_ul_all.length;i++){
					change(about_photo_ul_all[i]);//调用动画函数
				}
				function change(ul){//当前ul对象
				
					let url = ul.dataset.src;//获取热加载的图片地址
					let width = ul.offsetWidth/2;//获取ul宽度的2分之一
					let height = ul.offsetHeight/2;//获取ul高度的2分之一
					
					for(let i =0;i<4;i++){/* 添加元素并初始化 */
						ul.index = i;
						let li = document.createElement("li");//创建一个li
						li.style.width = width + "px";//让每个li的尺寸都等于ul的4分之1，这样就是4个图片组成一个ul
						li.style.height = height + "px";
						
						let img = document.createElement("img");//创建一个img
						img.src = url;//让图片src指向图片
						/* 让4个图片拼接起来
							第一张 left:0         top:0
							第二张 left:-widht    top:0
							第三张 left:0         top:-height
							第四张 left:-width    top:-height
						 */
						img.style.left = -(i % 2) * width+ "px";//0%2=0 1%2=1 2%2=0 3%2=1 * -width 正好
						img.style.top = -Math.floor(i / 2) * height + "px";//Math.fllor(取整) 0/2=0,1/2=0.5=>0,2/2=1,3/2=1.5=>1
						
						li.appendChild(img)//将img添加到li中
						ul.appendChild(li)//将li添加到当前ul对象中
					}
					
					/* 动画效果 */
					
					/* 鼠标移入 */
					ul.onmouseenter=function(){
						
						/* 让4个图片偏移
							第一张 left:0         top:height
							第二张 left:-2*widht  top:0
							第三张 left:width     top:-height
							第四张 left:-width    top:-2*height
						 */
						let about_photo_img_all = this.querySelectorAll("img");//取得当前ul中的img
						
						let left=[0,-2,1,-1];//找不着什么逻辑，就定义个数组吧
						let top=[1,0,-1,-2];

						for(let i = 0;i<about_photo_img_all.length;i++){//因为上面获取的是所有img,每个ul有4个img，所以index*4正好是当前ul的img下标
							about_photo_img_all[i].style.left = left[i] * width+ "px";
							about_photo_img_all[i].style.top = top[i] * height + "px";
						}
					}
					/* 鼠标移出 */
					ul.onmouseleave=function(){
						let about_photo_img_all = this.querySelectorAll("img");//取得当前ul中的img
						for(let i = 0;i<about_photo_img_all.length;i++){//回归原样，这个有规律
							about_photo_img_all[i].style.left = -(i % 2) * width+ "px";
							about_photo_img_all[i].style.top = -Math.floor(i / 2) * height + "px";
						}
					}
				}
			}
			
			/* ==========================第五屏======================================== */
			/* 获取DOM节点 */
			let team_people_li_all=getDOMAll("#content > .list > .team .team_people > li")
			let team_people = getDOM("#content > .list > .team .team_people")
			let team_section=getDOM("#content > .list > .team > section")
			/* 气泡效果 */
			bubble();
			function bubble(){
				
				let canvas = null;//用来阻止重复创建canvas对象
				let createBubbleTimer = 0;//用来获取创建气泡计时器id，停止时间函数
				let BubbleTimer = 0;//用来获取气泡动画计时器id,停止时间函数
				for(let i = 0;i<team_people_li_all.length;i++){
					/* 鼠标移入事件 */
					team_people_li_all[i].onmouseenter=function(){
						
						for(let j = 0;j<team_people_li_all.length;j++){//所有都透明
							team_people_li_all[j].style.opacity=".5"
						}
						this.style.opacity="1";//当前不透明
						/* 清除计时器 */
						clearInterval(createBubbleTimer);
						clearInterval(BubbleTimer);
						
						addCanvas(this);//给当前对象添加canvas
					}
				}
				/* 添加canvas */
				function addCanvas(li){
					let liBound = li.getBoundingClientRect();//获取li相对位置等值
					if(!canvas){//如果为null就创建，不为null，就直接使用
						canvas = document.createElement("canvas");
						canvas.width = liBound.width;		//让canvas的宽度和li一样
						canvas.height = liBound.height*2/3;	//让高度为li的三分之二
						canvas.style.position="absolute";	//开启绝对定位
					}
					canvas.style.left=liBound.left*0.99+"px";	//左定位到当前li的相对位置
					canvas.style.top=liBound.top*1.9/3+"px";	//上定位到当前li的相对位置的3分之2
					addBubble(canvas)//添加气泡动画
					
					/* 鼠标移出事件 ,当鼠标移入li 添加canvas 此时鼠标就进入canvas了，这时给canvas添加移出事件*/
					canvas.onmouseleave=function(){
						
						for(let j = 0;j<team_people_li_all.length;j++){//所有li不透明
							team_people_li_all[j].style.opacity="1";
						}
						/* 清除定时器 移除canvas 重新让canvas为null */
						clearInterval(createBubbleTimer);
						canvas.remove();
						canvas=null;
						clearInterval(BubbleTimer);
						
					}
					team_section.appendChild(canvas);//将canvas给section
				}
				/* 添加canvas气泡动画 */
				function addBubble(canvasEl){
					if(canvasEl.getContext){//如果有容器就添加，没有不添加
						
						context = canvasEl.getContext("2d")//获取2d容器
						
						let arr=[];//保存随机圆
						
						/* 生成随机圆 */
						createBubbleTimer=setInterval(function(){
							/* 半径 */
							let r = Math.random()*7+3;
							/* 随机圆心 */
							let x = Math.random()*canvasEl.width;
							let y = canvasEl.height-r;
							
							/* 随机颜色 随机透明*/
							let red = Math.round(Math.random()*255)
							let blue = Math.round(Math.random()*255)
							let green = Math.round(Math.random()*255)
							let alp = Math.random()*1+0.3
							/* 曲线运动 */
							let deg = 0;//初始角度为0
							let startX = x;//初始横轴位置
							let startY = y;//初始纵轴位置
							let step = Math.random()*50+5;//随机系数，控制sin函数的幅度
							/* 注入 */
							arr.push({
								x,
								y,
								r,
								red,blue,green,alp,
								deg,startX,startY,step
							})
						},100)
						
						let a = null;//用来保存数组对象
						/* 绘制圆 */
						BubbleTimer = setInterval(function(){
							context.clearRect(0,0,canvasEl.width,canvasEl.height);//清除画布
							
							/* 动画不断的改变规律 */
							for(let i = 0;i < arr.length;i++){
								a = arr[i]
								a.deg+=5		//角度增加
								/* 
									Math.sin(弧度):根据弧度返回0~1的正弦值
									正弦值*系数 系数越大，正弦函数图像的幅度就越大，*2是为了幅度增加一倍
									y就通过不断的减去一个数值，让气泡不断往上走就可以了
								 */
								a.x = a.startX + Math.sin(a.deg*Math.PI/180)*a.step*2;
								a.y = a.startY - (a.deg*Math.PI/180)*a.step;
								
								if(a.y<=50){		//如果当了画布的3分之2就清除元素
									arr.splice(i,1)	//清除元素
								}
							}
							
							/* 绘制到画布 */
							for(let i = 0;i < arr.length;i++){
								a = arr[i];
								context.save();							/* 保存当前环境的状态 */
								context.beginPath();					/* 起始一条路径，或重置当前路径 */
								context.arc(a.x,a.y,a.r,0,2*Math.PI)	/* 生成一个圆，半径为10 创建弧/曲线（用于创建圆形或部分圆）*/
								context.fillStyle="rgba("+a.red+","+a.green+","+a.blue+","+a.alp+")"/* 设置或返回用于填充绘画的颜色、渐变或模式 */
								// context.stroke() 					绘制已定义的路径
								// context.restore(); 					返回之前保存过的路径状态和属性
								context.fill();							/* 绘制图形 */
							}
						},7)
					}
				}
			}
			move(4)
		}
	</script>
</html>