2021-06-14

制作手风琴，遮罩层，canvas钟表效果

---

index.html部分

---

1.首先导入Jquery在线库 （本项目使用HBuilder X 软件制作）
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/jquery-3.6.0.min.js"/>
2导航栏效果代码（图片地址请选择自己电脑的本地地址）

<!-- nav导航栏 -->
			<div class="nav">
			<div class="center">
				<div class="logo l">
					<img src="./img/logo/logo.png" >
				</div>
				<div class="liebiao">
					<ul>
						<!-- <div class="abs">为导航栏上横条结构 -->
						<li><div class="abs"></div><a href="#">手风琴</a></li>
						<li><div class="abs"></div><a href="#">遮罩层放大</a></li>
						<li><div class="abs"></div><a href="#">canvas钟表</a></li>
						<li><div class="abs"></div><a href="#">自定义效果</a></li>
					</ul>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			//鼠标经过列表区变色函数
			function funMousever(x,bgd){
				$(".nav li").mouseover(function(){
					$(this).css("height","76").siblings("li").css("height","10")
					$(".nav li").eq(x).css("height","76")
					
					$(this).find(".abs").css({height:10,background:bgd})
					$(this).siblings("li").children(".abs").css("height","0")
					$(".abs").eq(x).css({height:10,background:bgd})
				})
			}
			//鼠标离开函数
			function funMouseleave(y,bgd){
				$(".nav li").mouseleave(function(){
					$(".nav li").eq(y).css("height","76").siblings("li").css("height","10")
					
					$(".abs").css("height","0")
					$(".abs").eq(y).css({height:10,background:bgd})
				})
			}
			//滚动监听事件判断当前内容区处于第几模块
			$(window).scroll(function(){
				$(".w").each(function(i,e){
					if($(document).scrollTop()>=$(e).offset().top){
						//函数调用
						if(i==0){
							funMousever(i,'#334960')
							funMouseleave(i,'#334960')
						}
						if(i==1){
							funMousever(i,'#f17c72')
							funMouseleave(i,'#f17c72')
						}
						
						if(i==2){
							funMousever(i,'#32ac97')
							funMouseleave(i,'#32ac97')
						}
						
						if(i==3){
							funMousever(i,'#7f4c76')
							funMouseleave(i,'#7f4c76')
						}
					}
				})
			})
			//点击滚动到指定区域
			$(".nav li").click(function(){
				console.log($(this).index())
				var current=$(".w").eq($(this).index()).offset().top
				$("body,html").stop().animate({
					scrollTop:current
				})
			})
			//滚动到该区域相应导航模块变色函数
			function bianse(x,bgd1,bgd2 ){
				$(".liebiao li").css("background",bgd1),$(".nav").css("background",bgd2)
				,$(".nav li").eq(x).css("height","76").siblings("li").css("height","10")
				
				,$(".nav li").eq(x).children(".abs").css({height:10,background:bgd2})
				,$(".nav li").eq(x).siblings("li").children(".abs").css("height","0")
			}
			$(window).scroll(function(){
				$(".w").each(function(i,e){
					if($(document).scrollTop()>=$(e).offset().top){
						//函数调用
						if(i==0){bianse(i,'#3f9fc9','#334960')}
						
						if(i==1){bianse(i,'#e6655e','#f17c72')}
						
						if(i==2){bianse(i,'#46dcc7','#32ac97')}
						
						if(i==3){bianse(i,'#b288ab','#7f4c76')}
					}
				})
			})
		</script>
		

3.手风琴代码

		<!-- 手风琴区域 -->
		<div class="shoufengqin w">
			<div class="texiao center">
				<ul>
					<li><img src="img/手风琴/slide-1.jpg" ></li>
					<li><img src="img/手风琴/slide-2.jpg" ></li>
					<li><img src="img/手风琴/slide-3.jpg" ></li>
					<li><img src="img/手风琴/slide-4.jpg" ></li>
					<li><img src="img/手风琴/slide-5.jpg" ></li>
				</ul>
			</div>
		</div>
		<script type="text/javascript">
			//页面加载后即滚动到手风琴区域，触发导航栏效果函数
			function fun1(){
				var current=$(".shoufengqin").offset().top
				$("body,html").animate({
					scrollTop:current
				})
				
			}
			fun1()
			//鼠标经过某个li当前li宽度变为770px,其余li的宽度变为100px
			$(".texiao li").mouseenter(function(){
				$(this).stop().animate({
					width:754,
					opacity:1
				})	
			$(this).siblings("li").stop().animate({
				width:104,
				opacity:1
			})
			})
			$(".texiao li").mouseleave(function(){
				$(".texiao li").stop().animate({
					width:234,
					opacity:0.6
				})
			})
		</script>

4.遮罩层代码

<!-- 遮罩层区域 -->
		<div class="zezhaoceng w">
			<div class="sanjiao1"></div>
			<div class="show center">
				<h1>遮罩层放大图</h1>
				<ul>
					<li><img src="img/遮罩层/large1.jpg" ><div class="zhezhao"></div><img class="sousuo" src="img/遮罩层/magnify.png" ></li>
					<li><img src="img/遮罩层/large2.jpg" ><div class="zhezhao"></div><img class="sousuo" src="img/遮罩层/magnify.png" ></li>
					<li><img src="img/遮罩层/large3.jpg" ><div class="zhezhao"></div><img class="sousuo" src="img/遮罩层/magnify.png" ></li>
					<li><img src="img/遮罩层/large4.jpg" ><div class="zhezhao"></div><img class="sousuo" src="img/遮罩层/magnify.png" ></li>
					<li><img src="img/遮罩层/large5.jpg" ><div class="zhezhao"></div><img class="sousuo" src="img/遮罩层/magnify.png" ></li>
					<li><img src="img/遮罩层/large6.jpg" ><div class="zhezhao"></div><img class="sousuo" src="img/遮罩层/magnify.png" ></li>
					<li><img src="img/遮罩层/large7.jpg" ><div class="zhezhao"></div><img class="sousuo" src="img/遮罩层/magnify.png" ></li>
					<li><img src="img/遮罩层/large8.jpg" ><div class="zhezhao"></div><img class="sousuo" src="img/遮罩层/magnify.png" ></li>
				</ul>
				<div class="big"></div>
			</div>
		</div>
		<script type="text/javascript">
			//当鼠标经过li时，当前的li的遮罩层显示,其他li的遮罩层隐藏，
			$(".show li").mouseover(function(){
				$(this).find(".zhezhao").stop().show()
				$(this).find(".sousuo").stop().show()
			})
			$(".show li").mouseout(function(){
				$(this).find(".zhezhao").stop().hide()
				$(this).find(".sousuo").stop().hide()
			})
			//轮播图方法，待完善
			$(".show li").click(function(){
				 $(".big").show()
				 $(this).animate({
					 zIndex:1,
					 width:640,
					 height:427,
				 })
				 alert("功能待完善,请重新刷新网页")
			 })
		</script>

5.canvas钟表代码

<!-- canvas钟表区域 -->
		<div class="zhongbiao w" >
			<div class="sanjiao2"></div>
			<div class="content center">
				<div class="text l">
					<h1 class="white">canvas画布</h1>
					<p>canvas 元素用于在网页上绘制图形。HTML5 的 canvas 元素使用 JavaScript 在网页上绘制2D图像。</p>
					<p>在矩形区域的画布上，JavaScript 绘制 2D图形，逐像素进行渲染，可以通过多种方法使用canvas元素绘制路径、矩形、圆形、字符以及添加图像。</p>
					<p>canvas 元素本身是没有绘图能力的。所有的绘制工作必须使用Javascript canvas绘图API完成。</p>
					<p>canvas在基于Web的图像显示方面比Flash更加立体、更加精巧，canvas游戏在流畅度和跨平台方面更牛。</p>
					<p>Flash曾经辉煌的时代，智能手机还未曾出现。现在以及未来的智能机时代，HTML5技术能够在banner广告上发挥巨大作用，用Canvas实现动态的广告效果再合适不过。</p>
				</div>
				<div class="naozhong l">
					<h1 class="white">钟表</h1>
					<div class="shijian">
						<ul id="ulid"></ul>
						<div id="hour"></div>
						<div id="minu"></div>
						<div id="sceo"></div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			//获取时分秒元素
			var ul=document.querySelector('#ulid')
			var hour=document.querySelector('#hour')
			var minu=document.querySelector('#minu')
			var sceo=document.querySelector('#sceo')
			//循环打印表盘
			for(var i=0;i<60;i++){
				var li=document.createElement('li')
				li.style.transform='rotate('+(i*6)+'deg)'
				if(i%5===0){
					li.style.height='30px'
					li.style.backgroundColor='black'
				}
				ul.appendChild(li)
			}
			run();
			//隔一秒执行一次
			setInterval(run,1000)
			function run(){
				var date=new Date()
				//获取系统时分秒时间
				var h=date.getHours()
				var m=date.getMinutes()
				var s=date.getSeconds()
				//时分秒旋转相对应角度
				hour.style.transform='rotate('+(h*30+m/2)+'deg)'
				minu.style.transform='rotate('+(m*6)+'deg)'
				sceo.style.transform='rotate('+(s*6)+'deg)'
			}
		</script>
		

6.自定义效果

<!-- 自定义效果区域 -->
		<div class="zidingyi w">
			自定义效果
		</div>
		<script type="text/javascript">
			var lis=document.querySelector('.zidingyi').querySelectorAll('img')
			var box=document.querySelector('.box')
			for(var i=0;i<lis.length;i++){
				lis[i].onclick=function(){
					box.style.background='url('+this.src+')';
				}
			}
		</script>

7.底部区域

<!-- 底部区域 -->
		<div class="footer">
			<p>本页面完成于2018-1-18，内容为《计算机软件工程》期末考试页面。</p>
		</div>

8.返回顶部区域

<!-- 返回顶部区域 -->
		<div class="fanzu">
			<img src="img/返回/totop.png" >
		</div>
		<script type="text/javascript">
			$(".fanzu").click(function(){
				var current=$(".shoufengqin").offset().top
				$("body,html").animate({
					scrollTop:current
				})
			})
		</script>

---

CSS样式

---

1.三角形和整体效果

* {
	margin: 0;
	padding: 0;
}
a {
	text-decoration: none;
}
li {
	list-style: none;
}
.white {
	color: white;
}
/* 左右浮动类 */
.l {
	float: left;
}
.r {
	float: right;
}
/* 版心 */
.center {
	width: 1173px;
	margin: 0 auto;
}
/* 三角形制作 */
.sanjiao1,.sanjiao2,.sanjiao3 {
	position: absolute;
	top: 0;
	left: 900px;/* 如何让绝对定位的盒子相对于父盒子居中 */
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 37px 50px 37px 50px;
}
.sanjiao1 {
	border-color:  #334960 transparent transparent transparent;
	
}
.sanjiao2 {
	border-color:  #f17c72 transparent transparent transparent;
	
}
.sanjiao3 {
	border-color:  #32ac97 transparent transparent transparent;
	
}

2.导航栏

/* nav导航栏 */
.nav {
	width: 100%;
	background-color: #334960;
	height: 100px;
	border-bottom: 1px solid black;
	position: fixed;
	top: 0;
	z-index: 1;
	
}

.logo img {
	margin: 30px 550px 0 0;
}
.liebiao ul li {
	position: relative;
	float: left;
	/* height: 10px; */
	transition: height 300ms;
	
}
.liebiao ul li .abs {
	position: absolute;
	width: 100%;
	top: 0;
	transition: height 10ms;
}
.liebiao ul li a {
	display: inline-block;
	padding: 38px 15px 12px 15px;
	/* margin-top: 10px; */
	color: white;
	font-size: 20px;
	
}

3.手工琴

/* 手风琴区域*/
.shoufengqin {
	height: 670px;
	background-color: #334960;
	padding-top: 85px;
	margin-top: 100px;
}
.texiao {
	height: 395px;
}
.texiao ul li {
	float: left;
	width: 230px;
	height: 395px;
	opacity:0.5;
	overflow: hidden;
	
}`

4.遮罩层

/* 遮罩层区域 */
.zezhaoceng {
	position: relative;
	padding: 185px 0 185px 0;
	background-color: #f17c72;
}
.show {
	position: relative;
	height: 460px;
	overflow: hidden;
}
.big {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,1);
	display: none;
	
}

.show h1 {
	color: white;
	font-weight: normal;
}
.show ul li {
	position: relative;
	float: left;
	width: 270px;
	height: 192px;
	overflow: hidden;
	border-radius: 5px;
	margin-top: 15px;
	margin-right: 30px;
	
}
.show ul li:nth-child(4) {
	margin-right: 0;
}
.show ul li:nth-child(8) {
	margin-right: 0;
}
.show .zhezhao {
	position: absolute;
	width: 270px;
	height: 192px;
	border-radius: 5px;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.6);
	display: none;
	
}
.show .sousuo {
	position: absolute;
	left: 110px;
	top: 80px;
	display: none;
}

5.canvas钟表样式

/* canvas钟表区域 */
.zhongbiao {
	position: relative;
	background-color: #32ac97;
	padding: 185px 0 185px 0;
	height: 550px;
}
.text {
	width: 545px;
	height: 500px;
	text-indent: 2em;
	margin:0 20px 0 30px;
	
}
.text h1 {
	text-indent: 0em;
	font-size: 35px;
	font-weight: normal;
	margin-bottom: 40px;
}
.text p {
	font-size: 20px;
	line-height: 35px;
}
.shijian {
	position: relative;
	width: 410px;
	height: 410px;
	border: 10px solid red;
	border-radius: 50%;
	margin-top: 20px;
	margin-left: 70px;
}
.naozhong h1 {
	font-size: 35px;
	font-weight: normal;
}
/* 会动的表 */
.shijian ul {
	width: 100%;
	height: 100%;
	position: relative;
}
.shijian ul li {
	position: absolute;
	width: 5px;
	height: 15px;
	background-color: white;
	left: 50%;
	top: 0;
	transform-origin: center 210px;
}
#hour,#minu,#sceo{
	position: absolute;
	left: 50%;
	top: 50%;
	transform-origin: center bottom;
}
#hour {
	background-color: yellow;
	width: 6px;
	height: 50px;
	margin-top: -50px;
}
#minu {
	background-color: blueviolet;
	width: 4px;
	height: 80px;
	margin-top: -80px;
}
#sceo {
	background-color: red;
	width: 2px;
	height: 120px;
	margin-top:-120px ;
}

6.自定义效果

/* 自定义效果区域*/
.zidingyi {
	height: 1000px;
	background-color: #7f4c76;
	
}

7.底部

/* 底部区域 */
.footer {
	width: 100%;
	height: 100px;
	background-color:#334960 ;
	text-align: center;
}
.footer p {
	color: white;
	line-height: 100px;
}

8.返回顶层

/* 返回顶部区域 */
.fanzu {
	overflow: hidden;
	width: 49px;
	height: 49px;
	border-radius: 50%;
	border: 1px solid pink;
	position: fixed;
	top: 80%;
	right: 0;
	z-index: 1;
}

运行效果如下：

web手风琴效果

资料图片：可自行保存