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 addCi.........完整代码请登录后点击上方下载按钮下载查看