js实现环形菜单效果

点击中间的圆点,会弹出环形菜单,效果图:

js实现环形菜单效果

代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript ring menu</title>
<style media="screen">

.plus{
  position: relative;
}
.plus::after,.plus::before {
  position: absolute;
  content: '';
  display: inline-block;
  border: 1px solid silver;
  opacity: 0.8;
}
.plus::before {
  width: 11px;
  height: 1px;
  left: 11px;
  top: 16px;
}
.plus::after {
  width: 1px;
  height: 11px;
  left: 16px;
  top: 11px;
}


.ring {
  width: 10px;
  height: 10px;
  position: relative;
  display: inline-block;
  padding: 1em;
  font-size: 12px;
  border-radius: 50% 50%;
  box-shadow: 1px 1px 5px 0 rgba(89,167,255,0.5);
}
.ring:hover{
  box-shadow: 1px 1px 5px 0 rgba(89,167,255,0.8);
}
.circle {
  position: absolute;
  cursor: pointer;
  padding: 0.8em 0.5em;
  display: inline-block;
  border-radius: 50% 50%;
  border: 1px solid rgba(89,167,255,0.2);
  box-shadow: 1px 3px 40px 0 rgba(89,167,255,0.3);
  overflow: hidden;
  word-break: keep-all;
  transition: left 0.5s linear,
  top 0.5s linear,
  color 0.5s linear,
  background-color 0.5s linear,
  box-shadow 0.5s linear;
}
.circle:hover{
  color: #fff;
  background-color: rgba(89,167,255,0.8);
  box-shadow: 1px 3px 40px 0 rgba(89,167,255,1);
  z-index: 100;
}
.ring.selected > .circle {
  display: inline-block;
  opacity: 1;
  z-index: 10;
}
.node-hide {
  width: 0px;
  height: 0px;
  opacity: 0;
  left: calc( 30% ) !important;
  top: calc( 30% ) !important;
}

</style>

</head>
<body>
<div class="ring">
<div class="circle">
属性
</div>
<div class="circle">
事件
</div>
<div class="circle">
类型
</div>
<div class="circle">
关联
</div>
<div class="circle">
更多
</div>
</div>
</body>
<script type="text/javascript">
var data = [
{title:'属性'},
{title:'事件'},
{title:'类型'},
{title:'关联'}
];
/**
* R 可以考虑通过传参动态设置
**/
function initRing(ctn, data) {
initByData(data); var items = ctn.querySelectorAll('.circle'),
R = 50, // 圆半径
angle = 360 / (items.length),
offsetX = getStyle(ctn).width / 2, // 中心点x轴偏移值
offsetY = getStyle(ctn).height / 2; // 中心点y轴偏移值
Array.from(items).map(function(item, index) {
var dw = getStyle(item).width / 2,
dh = getStyle(item).height / 2;
// 计算菜单坐标
var hudu = (2 * Math.PI / 360) * angle * index,
left = (Math.cos(hudu) * R + offsetX - dw).toFixed(2),
top = (Math.sin(hudu) * R + offsetY - dh).toFixed(2); item.style.setProperty('left', left + 'px');
item.style.top = top + 'px';
item.classList.add('node-hide');
}); ctn.addEventListener('click', function() {
var cls = Array.from(this.classList),
ctnr = this,
items = Array.from(ctnr.querySelectorAll('.circle'));
if (cls.includes('selected')) {
this.classList.remove('selected');
items.map(function(item) {
item.classList.add('node-hide');
});
} else {
this.classList.add('selected');
items.map(function(item) {
item.classList.remove('node-hide');
});
}
event.stopPropagation();
}); function initByData(data) {
if (data) {
data.map(function(item) {
var divDom = document.createElement('div');
divDom.classList.add('circle');
divDom.innerText = item.title;
ctn.appendChild(divDom);
});
}
} function getStyle(domObj) {
var style = document.defaultView.getComputedStyle(domObj);
var width = style.width.replace('px', '') * 1 + style['padding-left'].replace('px', '') * 1 + style['padding-right'].replace('px', '') * 1,
height = style.height.replace('px', '') * 1 + style['padding-top'].replace('px', '') * 1 + style['padding-bottom'].replace('px', '') * 1;
return {
width: width,
height: height
};
}
}
initRing(document.querySelector('.ring'),data) 

</script> 
</html>
上一篇:acdream.18.KIDx's Triangle(数学推导)


下一篇:HDU 5914 Triangle 数学找规律