尚硅谷H5实战

尚硅谷 VUE 尚品汇项目实战问题解决方式整理 最近在自学大型vue项目,选中了尚硅谷的尚品汇,之前也学习过黑马程序员的一个电商后台管理项目,因为项目打包优化时候出了Bug,就闲置了,但是代码是一行一行敲完啦,也放到了码云上! 阅读详情
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>
尚硅谷前端入门html+css学习笔记——H5和CSS3 z尚硅谷前端入门html+css零基础教程,零基础前端开发htmzl5+css3视频1、W3C官网地址2、优势(1)针对Javascript,新增了很多可操作接口(2)新增了一些语义化标签、全局属性(3)新增了多媒体标签,可以很好的替代flash(4)更加侧重语义化,对SEO更友好(5)可移植性好,可大量应用在可移动在设备上3、兼容性支持:Chrome、Safari、Opera、Firefox等主流浏览器,IE9及以上版本(1)解决实际面临的问题(2)按照模块化的方式去发展。 阅读详情

相关推荐

尚硅谷前端入门html+css学习笔记——尚品汇页面设计

z尚硅谷前端入门html+css零基础教程,零基础前端开发htmzl5+css3视频。

qq_62237063的博客 754

3天通俗易懂的HTML5项目实战教程(含资料)

本套视频是HTML5的实战视频,我们将综合HTML5的各个方面来构建一个fullpage(全屏滚动)的应用。课程将会从实战的角度深入全面的分析HTML5中的技术。并将技术灵活的运用入项目实战中。应用主要内容包括:1.dom中位置尺寸api详解;2.鼠标事件的兼容;3.全屏滚动的实现; 4.3d轮播的实现;5.3d品牌墙的实现;6.机器人动画实现;7.图片炸裂动画实现;8.canvas气泡动画实现。

vue实战项目-电商商城前台-(学习尚硅谷的)尚品汇

但是会出现卡顿现象。当微信支付弹窗弹出,就要持续发获取订单支付状态的请求(持续是因为并不知道用户什么时候支付,所以需要持续发请求,直到能获取到支付状态),若接收到支付成功,则路由跳转至支付成功页面。项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错,有了map文件就可以像未加密的代码一样,准确的输出是哪一行哪一列有错。例如,为防止,不经过某路由就直接在地址栏输入本路由地址而跳转至本路由,导致本路由获取不到前面路由的某些数据,所以给本路由加路由独享守卫。...

drhrht的博客 6988

一个简易的H5数据展示效果【demo】

先上效果图,正常展示: 向上滑动搜索框部分: 向下滑动搜索框部分: 实现代码如下:   &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;滑动效果&lt;/title&gt;

Kuroko's Development Notes 4453

AIGC内容溯源技术:如何追踪AI生成内容的原始来源

本文旨在系统性地介绍AIGC内容溯源的技术体系,帮助读者理解如何追踪AI生成内容的来源。我们将覆盖从基础概念到前沿技术的完整知识链,包括但不限于数字水印、区块链存证、内容指纹等技术方案。文章将从AIGC的基本概念出发,逐步深入探讨各种溯源技术,分析其原理和实现,最后讨论实际应用和未来趋势。AIGC:AI Generated Content,人工智能生成内容内容溯源:追踪数字内容的创作、修改和传播历史数字水印:嵌入在数字内容中的不可见识别信息数字水印:隐藏在内容中的识别信息,像隐形墨水内容指纹。

SuperAGI2025 2070

避坑指南:Xilinx SelectIO IP核官方例程里那些容易忽略的细节(复位、时钟与数据回环)

本文深入解析Xilinx SelectIO IP核设计中复位策略、时钟域交互和数据回环验证三大关键领域的实战避坑技巧。针对官方例程中易被忽视的细节,如复位同步链深度、时钟相位约束和数据对齐机制,提供经过项目验证的优化方案,帮助工程师节省80%以上的调试时间。特别适用于FPGA开发中高速接口设计场景。

weixin_42561476的博客 447

前端PC端示例(demo版)

视频链接:demo效果视频-优快云直播文档链接:https://download.csdn.net/download/qq_70172010/89378587

qq_70172010的博客 454

Claude Skills:不是更聪明,而是更“像专家”的 Agent 养成方法

Claude Skills 不是在告诉 Agent“你能做什么”, 而是在约束它“你应该如何思考、如何判断、如何给结论”。

测试者家园 1293

简单的手机html页面源代码,手机页面h5的简单demo

【实例简介】手机页面h5的简单demo,信息录入和展示的一些页面简单设计,采用html5,效果图可以到个人博客上面找【实例截图】【核心代码】h5网页设计└── 泛渠道上报网页设计├── 1_declare.html├── css│ ├── declare.css│ ├── font-awesome.min.css│ ├── new.css│ ├── public_head.css│...

weixin_35564059的博客 4842

【高级-RAG-优化方法】

本文介绍了两种优化RAG(检索增强生成)系统的高级方法。第一部分介绍KnowFlow项目,它采用父子分块技术,将文档分为父分块(800-1500字符)和子分块(200-400字符),通过精确匹配子分块再返回父分块内容来保证搜索精确性和上下文完整性。第二部分探讨Milvus的多种增强技术,包括查询增强(如假设问题生成、回溯提示)、索引增强(自动合并块、分层索引)、检索器增强(句子窗口检索、元数据过滤)、生成器增强(提示压缩、块排序)以及管道增强(自我反省、代理查询路由)。这些方法共同提升了RAG系统的检索效率

weixin_48585108的博客 960

用Coze平台30分钟打造《花光10亿》小游戏:零代码AI开发实战

本文详细介绍了如何利用字节跳动推出的Coze平台,在30分钟内零代码开发一款名为《花光10亿》的AI小游戏。通过配置提示词、集成图像生成插件、构建自动化工作流以及使用数据库功能,即使没有编程基础的用户也能快速将创意转化为可交互的智能应用,体验AI开发的便捷与高效。

weixin_29313547的博客 206

【亲测免费】 探索H5移动端Demo:轻量级、交互丰富的Web开发解决方案

探索H5移动端Demo:轻量级、交互丰富的Web开发解决方案 项目简介 中托管的H5-Mobile-Demo是一个开源项目,专为构建高效、响应式的移动Web应用而设计。该项目提供了一系列预设的UI组件和交互效果,旨在帮助开发者快速搭建H5页面,降低移动端开发的门槛。 技术分析 HTML5 & CSS3: 项目基于现代Web标准,利用HTML5的新特性(如离线存储、媒体元素等)和CSS3...

gitblog_00070的博客 977

STM32F103C8T6用官方bootloader实现IAP升级操作方法

在使用STM32F103C8T6单片机IAP功能时,可以自己写bootloader程序,也可以使用官方bootloader文件。下面说一下使用官方bootloader的使用方法。 首先下载官方bootloader文件 目前使用的是这个版本,打开文件夹,选择适合自己编译器的工程。 目前使用的是keil,所以打开MDK-ARM文件夹 打开IAP工程 打开后根据自己的单片机型号,对工程进行简单的修...

HXYDJ的博客 1万+

1024程序员节最新福利之2018最全H5前端资料集

前言 有好久没有写博客了,主要这段时间都沉迷学习无法自拔了,哈哈.自吹一波. 前两天不是1024节吗,所以就有很多福利出现了,当然每个人能都获得的信息都有所不同,这就是所谓的信息差.秉着好东西需要分享和开源的好习惯,所以来给你们送福利了. 其他福利 一、1024程序员节最新福利之2018最全java资料集合 二、1024程序员节最新福利之2018最全大数据资料集合 三、1024程序员节最新...

weixin_33725722的博客 1398

保姆级教程:在Android车机上从零配置USB Gadget,搞定CarPlay有线连接

本文详细介绍了在Android车机上从零配置USB Gadget以实现CarPlay有线连接的完整实践指南。涵盖内核驱动开发、Android系统配置及用户空间通信架构,帮助开发者深入理解USB子系统和iAP2协议栈,实现稳定可靠的CarPlay有线连接功能。

weixin_30621711的博客 472

基于LSTM的股票价格预测系统,Django框架,Web的股票预测系统,训练+数据集+源码(无需安装环境版)

股票价格预测是投资领域的一个重点关注课题。由于股票价格受到诸多非线性因素的影响,得到精确的预测结果较为困难。使用 PyCharm 作为代码开发工具,通过下载好的股票金融数据,进行数据预处理,构建 LSTM 网络模型,训练模型并训练出最优模型,输出股票未来收盘价波动的走势,最后在训练好的模型上,设计股票模型应用系统,运行效率较高,对股票预测具有一定的积极意义。

在职AI算法工程师,擅长计算机视觉,YOLO目标检测、分割等,擅长web、pyqt界面可视化,好内容持续更新中,来这里跟大家一起学习,共同进步 955

学习资料

尚硅谷官网资料导航】 谷粒学院在线学习:http://www.gulixueyuan.com/ 免直播课:www.atguigu.com/online.shtml  全套免费视频教程:www.atguigu.com/download.shtml 开发工具、技术文档、jar包资料:www.atguigu.com/opensource.shtml  自学尚硅谷视频,拿1万+月薪?看网友评价:

蓝假儿的博客 4603

visio安装包

Microsoft Office Visio 是一款专业的制图软件。利用经过更新的形状、协作工具和数据链接图表,创建专业级图表以简化复杂的信息。

1024程序员节最新福利之2018最全大数据资料集合

前言 有好久没有写博客了,主要这段时间都沉迷学习无法自拔了,哈哈.自吹一波. 前两天不是1024节吗,所以就有很多福利出现了,当然每个人能都获得的信息都有所不同,这就是所谓的信息差.秉着好东西需要分享和开源的好习惯,所以来给你们送福利了. 其他福利 一、1024程序员节最新福利之2018最全java资料集合 二、1024程序员节最新福利之2018最全H5前端资料集 三、1024程序员节最新...

weixin_34161029的博客 6463

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

SAP B1中文培訓教材_SDK

公司内部培训资料,对开发工具 ,DIAPI, UIAPI,Add-ON有详细解说

尚硅谷h5前端开发视频

尚硅谷h5前端开发视频 尚硅谷h5前端开发视频 尚硅谷h5前端开发视频   下载地址:百度网盘

a1758851526的博客 739

VC中sqlite的使用

在VC中对sqlite的使用,实现数据库大批数据的快速插入,读取数据库中的数据在ListCtrl中显示

尚硅谷JavaScript高级教程(javascript实战进阶)学习笔记

尚硅谷JavaScript高级教程(javascript实战进阶)学习笔记

m0_62516225的博客 1313

前端项目(一) 仿尚硅谷商优选项目

此项目是html、css、js完成的,没有涉及到任何框架,纯原生代码。此项目能较好的复习js基础知识,动态渲染数据、放大镜、缩略图、排他、价格动态变动、选项卡等知识,很适合新手入手的项目,如需要源码及文件私我。

m0_74151862的博客 1174

尚硅谷vue项目实战《尚医通》,Vue3项目+TypeScript前端项目 笔记

尚医通 预约挂号统一平台</p></div>-- 右侧 --><p class="help">帮助中心</p><p class="login">登录/注册

qq_33027421的博客 2150

尚硅谷VUE项目实战,前端项目-尚品汇 学习笔记(更新ing)

vue2 尚品汇 学习笔记

m0_51622088的博客 2898

H5学习1-----学习视频来源---尚硅谷

尚硅谷学习: 1、课程简介 2、学习内容简介 3、HTML简介 4、html注释 <!-- --> 5、标签的属性 W3School离线手册(2015.07.17) 6、文档声明 <!DOCTYPE html> 7、进制的简介 8、乱码问题 <meta charset=”utf-8”/> 9、常用的标签 <h1&...

qq_26036173的博客 210
上一篇: 强制maven重新下载相关依赖
下一篇: web移动端开发必会知识点总结
ydenergy_殷志鹏
博客等级 码龄7年 5885粉丝 543原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ydenergy_殷志鹏

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值