html5 扇形导航效果图,js+css实现扇形导航效果

本文实例为大家分享了js+css实现扇形导航效果的具体代码，供大家参考，具体内容如下\

扇形导航

*{

margin: 0;

padding: 0;

}

html,body{

height: 100%;

overflow: hidden;

}

#wrap{

height: 50px;

width: 50px;

/* background-color: pink; */

position: fixed;

right: 15px;

bottom: 15px;

/* overflow: hidden; */

}

#wrap>.home{

height: 49px;

width: 49px;

/* margin: auto; */

background: url(img/home.png) ;

background-position: center;

border-radius: 50%;

transition: 1s;

position: absolute;

z-index: 1;

}

#wrap>.nav{

height: 100%;

position: relative;

}

#wrap>.nav>img{

position: absolute ;

right: 0px;

bottom: 0px;

margin: 4px;

border-radius: 50% ;

}

.home:hover{

transform: rotate(360);

}

window.onload =function(){

var homeEle = document.querySelector("#wrap>.home");

var flag= true;

var imgs =document.querySelectorAll("#wrap>.nav>img");

function fn(){

this.style.transition=0.3+"s";

this.style.transform ="rotate(-360deg) scale(1)";

this.style.opacity =1;

this.removeEventListener("transitionend",fn);

}

for (var i=0;i

imgs[i].onclick =function(){

this.style.transform ="rotate(-360deg) scale(2)";

this.style.transition ="0.3s";

this.style.opacity =0.1;

this.addEventListener("transitionend",fn);

}

}

homeEle.onclick =function(){

console.log(imgs.length);

if(flag){

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

imgs.forEach((index,No)=>{

imgs[No].style.right = getLocation(140,No*22.5/180*Math.PI).left+"px";

imgs[No].style.bottom = getLocation(140,No*22.5/180*Math.PI).top+"px";

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

imgs[No].style.transition ="1s "+No*0.1+"s";

});

}else{

this.style.transform="rotate(0)";

imgs.forEach((index,No)=>{

imgs[No].style.right = 0+"px";

imgs[No].style.bottom = 0+"px";

imgs[No].style.transform ="rotate(0deg) scale(1)";

imgs[No].style.transition="1s "+(0.4-No*0.1)+"s";

});

}

flag =!flag;

}

var getLocation =function(r,deg){

var x =Math.round(r*Math.sin(deg));

var y =Math.round(r*Math.cos(deg));

return{left:x,top:y};

}

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。