扇形导航 css3

本篇文章将通过对css3中的2d变化以及过渡进行分析设计

先放上最终效果图

               

 

 

 

功能实现：1.给扇形home元素设置点击事件并添加2d旋转

　　　　　2.给导航栏设置2d旋转 并通过三角函数计算出各个导航位置

　　　　　3.设置导航单击事件 并添加过渡结束事件transitonend  完成点击放大并恢复的动画

注　　意：transitonend事件需要及时移除 假如没有内部自杀 

　　　　　则这个事件一直伴随着点击时间存在 则会导致其进行其他过渡时仍会触发

 

              　　　　导致右图变化

 

 

 

　　　　　　　　　　　　　　　　　　　　　　　　　　在过渡结束后存在多余操作

 

　　　　　　　　正确示意应是

 

 

　　　　　　　　　　　　　　　　　　　　　　　　　　　　内容清晰  无多余操作

 

css部分代码

	*{
				padding: 0;
				margin: 0;
			}
			
			body,html{
				height: 100%;
				overflow: hidden;
			}
			
			#wrap{
				position: absolute;
				bottom: 8px;
				right: 8px;
				width:50px ;
				height: 50px;
				/* background: pink; */
				
			}
			
			
			#wrap > #content>img{
				position: absolute;
				left: 0;
				top: 0;
				margin: 4px;
				border-radius:50% ;
				
			}
			#wrap > #content{
				height: 100%;
			}
			
			#wrap > #home{
				/* margin-top: 100px; */
				position: absolute;
				z-index: 1;
				/* height: 50px */
				background: url(img/home.png) no-repeat;
				width: 100%;
				height: 100%;
				border-radius:50% ;
				top: 0;
				left: 0;
				
				transition: 1s;
				
				
				
			}
		/* 	#wrap > #home:hover{
				transform: rotate(720deg);
			}
			 */

　　html代码如下

<div id="wrap">
			<div id="content">
				<img src="img/clos.png" >
				<img src="img/full.png" >
				<img src="img/open.png" >
				<img src="img/prev.png" >
				<img src="img/refresh.png" >
			</div>
			<div id="home"></div>
		</div>
		

　　JavaScript代码如下

	<script type="text/javascript">
		window.onload=function(){
		　　var c=130;
		　　var home=document.getElementById("home");
		　　var imgs=document.querySelectorAll("#wrap > #content > img");
		　　var flag=true;
		 　 home.onclick = function(){
						
			　　　　function fun(){
						this.style.transition=".1s";
						this.style.transform="rotate(-720deg) scale(1) ";
						this.style.opacity="1";
						this.removeEventListener("transitionend",fun);
						}
						//给所有的img绑定点击属性  需要遍历
						for(i=0;i<imgs.length;i++){
							imgs[i].addEventListener("click",function(){
								this.style.transform="rotate(-720deg) scale(1.5) ";
								this.style.transition=".4s";
								this.style.opacity="0.1";
								 this.addEventListener("transitionend",fun);
							});
							//在运行结束后希望能触发一个新的事件  并移除它
							//imgs[i].addEventListener("transitionend",fun);
						}
						
						if(flag){

　var distance=getpoint(c,90*i/(imgs.length-1));
							this.style.transform= "rotate(-720deg)";
							for(i=0;i<imgs.length;i++){
								//因为是逐个出现  所以要算不同的过渡延迟  还要有空格进行区分两个属性 
								imgs[i].style.transition=".5s "+(i*0.1)+"s ";
								//因为有旋转
								imgs[i].style.transform=" rotate(-720deg) scale(1)";
								imgs[i].style.left = -distance.left+"px";
								imgs[i].style.top = -distance.top+"px";
							}
						}else{
							for(i=0;i<imgs.length;i++){
								imgs[i].style.transition=".5s "+((imgs.length-1-i)*0.1)+"s ";
								imgs[i].style.transform=" rotate(0) scale(1)";
								imgs[i].style.left = "0px";
								imgs[i].style.top = "0px";
							}
							this.style.transform= "rotate(0deg)";
						}
						flag=!flag;
					}
				}
				
				
				
				//已知一条边和一个角 求它的x y
				function getpoint(c,deg){
　　　　　　　　　　　　　　　　　   　//角度转弧度公式　　三角函数
					var left=Math.round(c*Math.sin(deg*Math.PI/180));
					var top=Math.round(c*Math.cos(deg*Math.PI/180));
					return {
						left:left,
						top:top
					}
				}
			
					
	
		</script>