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

阅读  ·  发布日期 2021-01-05 11:44  ·  admin
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

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