java 扇形_扇形导航 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代码如下

JavaScript代码如下

window.οnlοad=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[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){

this.style.transform= "rotate(-720deg)";

for(i=0;i

//因为是逐个出现 所以要算不同的过渡延迟 还要有空格进行区分两个属性

imgs[i].style.transition=".5s "+(i*0.1)+"s ";

//因为有旋转

imgs[i].style.transform=" rotate(-720deg) scale(1)";

imgs[i].style.left = -getpoint(c,90*i/(imgs.length-1)).left+"px";

imgs[i].style.top = -getpoint(c,90*i/(imgs.length-1)).top+"px";

}

}else{

for(i=0;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

}

}