web前端：扇形导航，三角函数sinθ对边x轴，cosθ邻边y轴计算原生实现

1.三角函数原理分析

2.less定义布局

* {margin: 0;padding: 0;//找子选择器css：#id > .class {}body {//取消滚动条显示height: 100%;overflow: hidden;#sector-navigate {width: 300px;height: 300px;font: 50px/300px "微软雅黑";text-align: center;color: white;background: salmon;border-radius: 50%;margin: auto;position: absolute;top: 0;left: 0;right: 0;bottom: 0;transition: 2s;}&:hover #sector-navigate {background: skyblue;}//扇形导航#sector-nav {width: 50px;height: 50px;//fixed：固定位置，默认left/top right/bottom:auto，生效需要指定值为0position: fixed;right: 20%;bottom: 20%;.sector-nav-home {//一旦定位position：absolute绝对定位，那么宽高依赖内容，将被内容撑开position: absolute;left: 0;top: 0;//图层显示z-index: 1;//position后，需要定义宽高height: 100%;width: 100%;background: url(../img/home.png) no-repeat;border-radius: 50%;transition: 2s;}/**home-->line分割距离：width=140px-->0°-90°：5个tag，分割4个角度，每个22.5°--》每个tag，坐标*/.sector-nav-inner {height: 100%;img {//absolute：绝对定位，所有img重叠一个位置,和fixed定位一样，需要申明positionposition: absolute;top: 0;left: 0;//居中，图片为42*42px，上下左右各空4个位置margin: 4px;border-radius: 50%;//每个tag出现duration不同，这里不可指定transition//transition: 1s;}}}}
}

3.css原生

* {margin: 0;padding: 0;
}
* body {height: 100%;overflow: hidden;
}
* body #sector-navigate {width: 300px;height: 300px;font: 50px/300px "微软雅黑";text-align: center;color: white;background: salmon;border-radius: 50%;margin: auto;position: absolute;top: 0;left: 0;right: 0;bottom: 0;transition: 2s;
}
* body:hover #sector-navigate {background: skyblue;
}
* body #sector-nav {width: 50px;height: 50px;position: fixed;right: 20%;bottom: 20%;}
* body #sector-nav .sector-nav-home {position: absolute;left: 0;top: 0;z-index: 1;height: 100%;width: 100%;background: url(../img/home.png) no-repeat;border-radius: 50%;transition: 2s;
}
* body #sector-nav .sector-nav-inner {height: 100%;
}
* body #sector-nav .sector-nav-inner img {position: absolute;top: 0;left: 0;margin: 4px;border-radius: 50%;
}

4.js原生实现元素捕捉

//不发起window.onload加载，有可能获取不到元素（js速度快，有可能没有在页面加载完就获取元素）
window.onload=function(){var homeNode=document.querySelector(".sector-nav-home");var imgs=document.querySelectorAll("#sector-nav > .sector-nav-inner > img");var flag=true;var c=140;//斜边距离//点击事件homeNode.onclick=function(){//进入顺时针转动if(flag){console.log("旋转！");/*** 1.transition：在元素首次进入渲染没有完成时，不会触发过渡* 2.transform:在大部分切换css样式中，如果变换函数的 TODO 位置、TODO 个数 不同，也不会触发过渡*/this.style.transform="rotate(-1000deg)";//.sector-nav-inner无定位，参照#sector-nav的fixed定位for(var i=0;i<imgs.length;i++){//添加过渡时间，和延迟。注意时间后加 空格imgs[i].style.transition="1s "+(i*0.15)+"s";//旋转逆时针imgs[i].style.transform="rotate(-720deg)";//将每个图片的坐标点设置带imgs[i],deg=90/(imgs.length-1)*i,获取每个img的读书//在容器#sector-nav中：正值在下方出现，需要改为负值imgs[i].style.left=-getPoint(c,90/(imgs.length-1)*i).left+"px";imgs[i].style.top=-getPoint(c,90/(imgs.length-1)*i).top+"px";}}else{//关闭逆时针转动this.style.transform="rotate(0deg)";for(var i=0;i<imgs.length;i++){//最后一个定位的坐标先消失(imgs.length-1-i)imgs[i].style.transition="1s "+((imgs.length-i)*0.15)+"s";imgs[i].style.transform="rotate(720deg)";imgs[i].style.left=0+"px";imgs[i].style.top=0+"px";}}//执行完毕，反转还原flag，切换效果可使用flag=!flag;}/*** 已知：斜边和角度* cosθ=邻边（y轴）/斜边  cos22.5°=y轴/140  y坐标=cos22.5°*140=sinθ=对边（x轴）/斜边   sin22.5°=x轴/140  x坐标=sin22.5°*140=cos22.5°=-0.8733046400935156sin22.5°=-0.4871745124605095角度转弧度：deg*Math.PI*2/360 = deg*Math.PI/180*/function getPoint(c,deg){//sinθ=对边（x轴）//不取小数，使用Math.round()var x=Math.round(c*Math.sin(deg*Math.PI/180));//cosθ=临边（y轴）var y=Math.round(c*Math.cos(deg*Math.PI/180));//{属性名：变量值，属性名：变量值} left=x轴坐标 top=y轴坐标return {left:x,top:y};}
}

5.html

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>扇形导航sector navigate transition</title></head><body><h1>sector-navigate</h1><div id="sector-navigate">扇区</div><div id="sector-nav"><div class="sector-nav-inner"><img src="img/clos.png" alt="关闭" /><img src="img/full.png" alt="全屏" /><img src="img/open.png" alt="打开文件" /><img src="img/prev.png" alt="后退" /><img src="img/refresh.png" alt="刷新" /></div><div class="sector-nav-home"></div></div></body><link rel="stylesheet" href="css/sector-navigate.css" /><script type="text/javascript" src="js/sector-navigate.js"></script>
</html>

6.效果图

web前端：扇形导航，三角函数sinθ对边x轴，cosθ邻边y轴计算原生实现相关推荐

2020 - 2021 年 Web 前端最新导航 - 前端学习资源分享前端面试资源汇总
前端javascriptvue.jses6typescript 发布于 10月9日国庆这几天,我收集了大量可以显著提升开发效率的前端导航链接. 这些导航链接对我很有帮助,希望对你也是如此. 这些好用 ...
【Web前端二级导航栏】
简单的Web前端二级导航栏示例: <!DOCTYPE html> <html><head><meta charset="utf-8"> ...
2020 - 2021 年 Web 前端最新导航
国庆这几天,我收集了大量可以显著提升开发效率的前端导航链接. 这些导航链接对我很有帮助,希望对你也是如此. 这些好用的导航链接都已经部署到这个网站 https://www.kwgg2020.com ...
2020年Web前端最新导航（常见前端框架、前端大牛）
前言本文列出了很多与前端有关的常见网站.博客.工具等,整体来看比较权威.有些东西已经过时了,我就不列出来了. 学是一方面,也是最主要的方面:但还有一个作用,比如,"这个前端框架你都不知道啊 ...
Web前端二级导航栏设计
下面两个100行代码,注释详实易懂,主要靠gpt,这么说,是不是,只要某些游戏网站是开源的,我把网址给gpt,它也能给我找来,并在每一行注释,然后我各种搜资料,那么是不是可以几天速成制作精美而新潮的网 ...
web前端之CSS3
文章目录 CSS3 1.浏览器厂商前缀 2.CSS3 边框 2.1 CSS3 圆角边框(border-radius) 2.1.1 浏览器支持 2.2 CSS3 盒阴影( box-shadow) 2.3 ...
web前端学习之——页面美妆师css3基础篇
页面美妆师css3基础结构(html)与样式(css)相分离 1.css基本语法规范 1.1 行内式(内联样式) 是通过标签的style属性来设置元素的样式 <标签名 style=" ...
尚硅谷web前端HTML5+CSS3笔记
目录 1尚硅谷-课程简介 2尚硅谷-网页简史 3尚硅谷-HTML简史 4尚硅谷-编写你的第一个网页 5尚硅谷-安装notepad++ 6尚硅谷-自结束标签和注释 7尚硅谷-标签中的属性 8尚硅谷-文档 ...
web前端开发技术实验与实践（第三版）储久良编著项目12 设计简易网站导航
web前端开发技术实验与实践(第三版)储久良编著项目12 设计简易网站导航实训三项目12 设计简易网站导航一.页面文字素材: 序号网站名称 URL 1 百度 http://www.ba ...

web前端：扇形导航，三角函数sinθ对边x轴，cosθ邻边y轴计算原生实现

1.三角函数原理分析

2.less定义布局

3.css原生

4.js原生实现元素捕捉

5.html

6.效果图

web前端：扇形导航，三角函数sinθ对边x轴，cosθ邻边y轴计算原生实现相关推荐

最新文章

热门文章