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

代码：

<!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>


												


											
js实现环形菜单效果的更多相关文章
	

    
								
  1. js实现收缩菜单效果
		
    废话不多说,直接上代码: 有注释 <head> <title></title> <style type="text/css"> di ...
    
		
    2. 
						
  2. 原生JS通过勾股定理计算苹果菜单效果
		
    JS原生苹果菜单效果 知识点: 勾股定理 a²+b²=c² Event 是一个事件对象,当一个事件发生后,和当前事件发生相关的详细信息会被临时存储到一个指定的地方,也就是event对象,以方便我们在需 ...
    
		
    3. 
						
  3. 原生JS实现苹果菜单
		
    今天分享下用原生JS实现苹果菜单效果,这个效果的重点有以下几点 图标中心点到鼠标的距离的算法 利用比例计算图标的宽度 代码地址:https://github.com/peng666/blogs/blo ...
    
		
    4. 
						
  4. 适合移动手机使用的js环形菜单特效插件
		
    blooming-menu是一款适合在移动手机上使用的js环形菜单插件.该环形菜单提供了众多的參数,通过结合CSS3动画制作出效果很炫酷的圆形菜单展开和隐藏动画效果. 以下是这个圆形菜单菜价的可用參数 ...
    
		
    5. 
						
  5. jQuery Wheel 环形菜单插件5种效果演示
		
    很酷的菜单-jQuery Wheel 环形菜单插件5种效果演示在线预览 下载地址 实例代码 <div class="container"> <!-- Top Na ...
    
		
    6. 
						
  6. 用js枚举实现简易菜单效果
		
    用js枚举实现简易菜单效果,左侧显示菜单,右侧显示用户选择的菜单,一图胜千言,还是直接来张效果图吧: 以下是代码: <DOCTYPE html> <html> <head ...
    
		
    7. 
						
  7. Js实现京东无延迟菜单效果(demo)
		
    一个端午节,外面人山人海,又那么热,我认为宅在家里看看慕课网,充实自己来的实际... 这是一个js实现京东无延迟菜单效果,感觉很好,分享给大家... 1.开发基本的菜单结构 2.开发普通的二级菜单效果 ...
    
		
    8. 
						
  8. js下拉框二级关联菜单效果代码具体实现
		
    这篇文章介绍了js下拉框二级关联菜单效果代码具体实现,有需要的朋友可以参考一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...
    
		
    9. 
						
  9. Js实现京东无延迟菜单效果(demo) 慕课网
		
    先来理清思路:1.开发基本的菜单结构 2.开发普通的二级菜单效果 3.假如延迟解决移动问题 切换子菜单时候,用setTimeout设置延迟 debounce去抖技 在事件被频繁触发是,只执行一次处理  ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. appium +ios 判断元素是否存在，排除visible=“false”的数据
			
    问题 想要判断name=xxx的元素是否存在,存在的话进行点击,结果页面并没有展示我要的元素时也提示找到了元素   原因 ios通过driver.find_element_by_name(“name值 ...
    
			
    2. 
						
  2. MVC中html编码与否
			
    MVCHtmlString可以不进行编码. 例子:string s=‘<a style="color:red">链接</a>’: 1.@s,直接输出< ...
    
			
    3. 
						
  3. WEB 自动化思路
			
    前期做了一个关键字驱动模型的WEB自动化项目,特意写文章归纳和总结下. 框架架构图 已经实现的部分: 1. 读写excel数据模板 2.配置中心,支持properties,xml格式的配置文件 3.参 ...
    
			
    4. 
						
  4. c++实现中的一些注意 事项
			
    1,尽可能延后对象中的变量定义式的出现,这样可以增加程序的清晰度,尽量少的调用构造,如果有定义变量最好在末尾定义并给予初值,这样就避免了默认构造函数的调用. 2 尽量少做转型操作. const_cas ...
    
			
    5. 
						
  5. C++ 单例模式(懒汉、饿汉模式)
			
    1.简单的单例模式实现 2.C++的构造函数不是线程安全的,所以上述代码在多线程的情况下是不安全的,原因是new Singelton时,这句话不是原子的,比如一个线程执行了new的同时,另一个线程对i ...
    
			
    6. 
						
  6. java  基础之--java动态代理
			
    1.抽象角色:声明真实对象与代理对象的共同接口: 2.代理角色:相当于中介的作用,bridge,内部包含对真实角色的reference,在执行真实操作对象时,附加其他操作,相当于对真实角色的封装: 3 ...
    
			
    7. 
						
  7. SCP对拷如何连接指定端口远程主机
			
    SCP对拷如何连接指定端口(非22端口)的远程主机 scp  -P  远程端口号  本机待拷贝文件路径 远程主机用户名@远程主机地址:远程主机目的路径 注意:  1.  参数-P 的位置一定要紧跟在s ...
    
			
    8. 
						
  8. 【gRPC使用问题4】
			
    1.进行gRPC服务调用出错:服务不可用 2.解决方案: linux系统部署的节点服务的确不可用,愿意是 系统是泡在虚拟机里面, 计算核数只有一核,太小,服务没有跑起来.
    
			
    9. 
						
  9. Windows下PythonQt编译（vs2015+Qt5.11.2+PythonQt 3.2）探索
			
    时间:2018年10月20日 笔者最近在做Qt方面的开发工作,需用到脚本程序对程序内部进行扩展,就很自然的想到了PythonQt,下面介绍PythonQt在Windows下的的安装编译心得,水平有限, ...
    
			
    10. 
						
  10. Informatica_(6)性能调优
			
    六.实战汇总31.powercenter 字符集 了解源或者目标数据库的字符集,并在Powercenter服务器上设置相关的环境变量或者完成相关的设置,不同的数据库有不同的设置方法: 多数字符集的问题 ...
    
			
    11.