js实现圆环弧线导航菜单效果代码-html代码-BFW代码库

js实现圆环弧线导航菜单效果代码

代码语言：html

代码描述：js实现圆环弧线导航菜单效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    @import url(https://fonts.googleapis.com/css?family=Economica:400,700);

body {
  background: #c0392b;
  font-family: 'Economica', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  -webkit-backface-visibility: hidden;
}

#circle {
  width: 400px;
  height: 400px;
  border-radius: 200px;
  border: 2px solid #fff;
  position: absolute;
  left: -250px;
}
</style>

</head>
<body>


  <script >
      var links = [{label: 'link1', bg: '#c0392b'}, 
             {label: 'link2', bg: '#16a085'}, 
             {label: 'link3', bg: '#8e44ad'}, 
             {label: 'link4', bg: '#27ae60'}, 
             {label: 'link5', bg: '#f39c12'}, 
             {label: 'link6', bg: '#2980b9'}];
var windowHeight = window.innerHeight;
if(windowHeight === 0) windowHeight = 238;
var radius = windowHeight*0.6,
    circle = document.createElement('div'),
    borderSize = radius*0.021;
    totalArea = 48, 
    increment = totalArea/(links.length-1),
    startPoint = 0-(totalArea/2),
    fontSize = radius*0.12,
    linkSize = radius*0.25;

styleCircle();
addCircle();
addLinks();
styleLinks();

function styleCircle() {
  circle.style.border= borderSize+'px solid #fff';
  circle.style.width = radius*2+'px';
  circle.style.height = radius*2+'px';
  circle.style.borderRadius = radius+'px';
  circle.style.position = 'absolute';
  circle.style.top = '-'+radius*0.2+'px';
  circle.style.left = radius*-1+'px';
}

function addCircle() {
  document.body.appendChild(circle);
}

function addLinks() {
  for (var i=0, l=links.length; i<l; i++) {
    link = document.createElement('a'),
    hover = document.createElement('span');
    link.href = "#";
    link.dataset.color = links[i].bg;
    link.style.display = 'inline-block';
    link.style.textDecoration = 'none';
    link.style.color = '#fff';
    link.style.position = 'absolute';
    link.style.zIndex = 100;
    link.innerHTML = links[i].label;
    hover.style.position = 'absolute';
    hover.style.display = 'inline-block';
    hover.style.zIndex = 50;
    hover.style.opacity = 0;
    document.body.appendChild(link);
    document.body.appendChild(hover);
    link.addEventListener('mouseover', linkOver);
    link.addEventListener('mouseout', linkOut);
 .........完整代码请登录后点击上方下载按钮下载查看