hello 大家好 我是浮若夢幻 今天給大家帶來的是一個 前幾天剛剛好看到不錯的網頁 然後自己隨手 寫了一寫 這個扇形導航條的製作 希望大家喜歡
其中的原理 知識點會配合math 做 數學計算
1.勾股定理
2.三角函數
3.角度與弧度的轉化
點擊展開是這樣
一個不錯的導航頁面 配合 js 完成
下面是源碼 如果有什麼不懂 歡迎大家留言評論
<!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{
position: fixed;
right: 15px;
bottom: 15px;
width: 50px;
height: 50px;
}
#wrap > .inner{
height: 100%;
}
#wrap > .inner > img{
position: absolute;
left: 0;
top: 0;
margin: 4px;
border-radius: 50%;
}
#wrap > .home{
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 100%;
height: 100%;
background: url(img/home.png) no-repeat;
border-radius: 50%;
transition: 1s;
}
</style>
</head>
<body>
<div id="wrap">
<div class="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="home">
</div>
</div>
</body>
<script type="text/javascript">
/*
1.在元素首次渲染還沒有完成的情況下,是不會觸發過渡的
2.在絕大部分變換樣式切換時,如果變換函數的位置 個數不相同也不會觸發過渡
*/
window.onload=function(){
var homeEle = document.querySelector(".home");
var imgs = document.querySelectorAll("#wrap > .inner > img");
var flag =true;
var c= 140;
/*第二部分*/
function fn(){
this.style.transition="0.3s ";
this.style.transform="rotate(-720deg) scale(1)";
this.style.opacity=1;
this.removeEventListener("transitionend",fn);
}
for(var i=0;i<imgs.length;i++){
imgs[i].onclick=function(){
this.style.transition="0.5s ";
this.style.transform="rotate(-720deg) scale(2)";
this.style.opacity=0.1;
this.addEventListener("transitionend",fn)
}
}
/*第一部分*/
homeEle.onclick=function(){
if(flag){
this.style.transform="rotate(-720deg)";
for(var i=0;i<imgs.length;i++){
imgs[i].style.transition="1s "+(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{
this.style.transform="rotate(0deg)";
for(var i=0;i<imgs.length;i++){
imgs[i].style.transition="1s "+((imgs.length-1-i)*0.1)+"s";
imgs[i].style.transform="rotate(0deg) scale(1)"
imgs[i].style.left = 0+"px";
imgs[i].style.top = 0+"px";
}
}
flag=!flag;
}
//已知第三邊 和 一個角
function getPoint(c,deg){
var x =Math.round(c * Math.sin(deg*Math.PI/180));
var y =Math.round(c * Math.cos(deg*Math.PI/180));
return {left:x,top:y};
}
}
</script>
</html>