html中怎么做扇形菜单,扇形菜单导航

window.onload = function() {

var homeEle = document.querySelector(".home");

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

var flag = true;

var c = 140;

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)";

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)"

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

};

}

}