微信小程序制作公司_js+css完成扇形导航效果

js+css实现扇形导航效果       这篇文章主要为大家详细介绍了js+css实现扇形导航效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

 !DOCTYPE html 
 html 
 head 
 meta charset="utf-8" 
 title 扇形导航 /title 
 style type="text/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);
 /style 
 /head 
 body 
 div id="wrap" 
 div /div 
 div 
 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 
 /body 
 script type="text/javascript" 
 window.onload =function(){
 var homeEle = document.querySelector("#wrap .home");
 var flag= true;
 var imgs =document.querySelectorAll("#wrap .nav img");

 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};
 /script 
 /html 

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