扇形导航 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>

巴特西

扇形导航 css3

最新文章

热门文章