js实现圆形菜单选择器


Posted in Javascript onDecember 03, 2020

本文实例为大家分享了js实现圆形菜单选择器的具体代码,供大家参考,具体内容如下

js实现圆形菜单选择器

js实现圆形菜单选择器

代码:

<head>
  <style>
    .mask{
      position: absolute;
      width: 502px;
      height: 252px;
      left:300px;
      top:350px;
      background: white;
      z-index: 999;
    }
    .con {
      width: 500px;
      height: 500px;
      overflow: hidden;
      position: absolute;
      border-radius: 100%;
      border: 1px solid black;
      user-select: none;
      cursor: pointer;
      left: 300px;
      top: 100px;
    }
 
    .con>div {
      position: absolute;
      width: 250px;
      height: 250px;
      /* border:1px solid black; */
      top: 0;
      left: 125px;
      text-align: center;
      font-size: 16px;
      transform-origin: bottom center;
    }
 
    .con1 {
      width: 400px;
      height: 400px;
      /* background: yellow; */
 
      overflow: hidden;
      position: absolute;
      border-radius: 100%;
      border: 1px solid black;
      user-select: none;
      cursor: pointer;
      left: 350px;
      top: 150px;
    }
 
    .con1>div {
      position: absolute;
      width: 200px;
      height: 200px;
      /* border:1px solid black; */
      top: 0;
      left: 100px;
      text-align: center;
      font-size: 16px;
      transform-origin: bottom center;
    }
  </style>
  <meta name="viewport"
    content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
 
<body>
  <div class="mask"></div>
  <div class="con">
  </div>
  <div class="con1">
  </div>
  <script>
    conRender();
    conRender1();
    function conRender() {
      var con = document.querySelector(".con");
      var len = 16;
      var deg = 360 / len;
      for (var i = 0; i < len; i++) {
        var dom = document.createElement("div");
        dom.style.transform = "rotate(-" + i * deg + "deg)";
        dom.innerHTML = "财务管理" + i;
        dom.setAttribute("index", i)
        con.appendChild(dom)
      }
      var mouseDown = false;
      var startX = 0;
      var startY = 0;
      var endX = 0;
      var endY = 0;
      var rotate = 0;
      con.addEventListener("mousedown", function (e) {
        mouseDown = true;
        startX = e.pageX;
        startY = e.pageY;
      }, false);
      con.addEventListener("mousemove", function (e) {
        if (mouseDown) {
          endX = e.pageX;
          endY = e.pageY;
          var distance = Math.sqrt(Math.pow((endX - startX), 2) + Math.pow((endY - startY), 2))
          if (endX - startX < 0 || endY - startY < 0) {
            distance = -distance
          }
          rotate += distance
          con.style.transform = "rotate(" + (rotate / 4) + "deg)";
          startX = e.pageX;
          startY = e.pageY;
          var index = Math.round((rotate / 4) / deg);
          var cons = document.querySelectorAll(".con>div")
          for (var i = 0, len = cons.length; i < len; i++) {
            cons[i].style.color = "black"
          }
          document.querySelector("div[index=\"" + index % len + "\"]").style.color = "red"
          document.querySelector(".con1").style.transform = "rotate(" + (rotate) + "deg)";
        }
      }, false);
      document.addEventListener("mouseup", function (e) { mouseDown = false; }, false);
 
    }
    function conRender1() {
      var con = document.querySelector(".con1");
      var len = 13;
      var deg = 360 / len;
      for (var i = 0; i < len; i++) {
        var dom = document.createElement("div");
        dom.style.transform = "rotate(-" + i * deg + "deg)";
        dom.innerHTML = "财务管理" + i;
        dom.setAttribute("index1", i)
        con.appendChild(dom)
      }
      var mouseDown = false;
      var startX = 0;
      var startY = 0;
      var endX = 0;
      var endY = 0;
      var rotate = 0;
      con.addEventListener("mousedown", function (e) {
        mouseDown = true;
        startX = e.pageX;
        startY = e.pageY;
      }, false);
      con.addEventListener("mousemove", function (e) {
        if (mouseDown) {
          endX = e.pageX;
          endY = e.pageY;
          var distance = Math.sqrt(Math.pow((endX - startX), 2) + Math.pow((endY - startY), 2))
          if (endX - startX < 0 || endY - startY < 0) {
            distance = -distance
          }
          rotate += distance
          con.style.transform = "rotate(" + (rotate / 4) + "deg)";
          startX = e.pageX;
          startY = e.pageY;
          var index = Math.round((rotate / 4) / deg);
          var cons = document.querySelectorAll(".con1>div")
          for (var i = 0, len = cons.length; i < len; i++) {
            cons[i].style.color = "black"
          }
          document.querySelector("div[index1=\"" + index % len + "\"]").style.color = "red"
        }
      }, false);
      document.addEventListener("mouseup", function (e) { mouseDown = false; }, false);
 
    }
  </script>
</body>
 
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。 

Javascript 相关文章推荐
两种简单实现菜单高亮显示的JS类代码
Jun 27 Javascript
jQuery简单图表peity.js使用示例
May 02 Javascript
jquery常用方法及使用示例汇总
Nov 08 Javascript
jQuery中判断对象是否存在的方法汇总
Feb 24 Javascript
JavaScript禁止用户多次提交的两种方法
Jul 24 Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
Jul 31 Javascript
微信小程序实现根据字母选择城市功能
Aug 16 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
Dec 27 Javascript
解决VUEX兼容IE上的报错问题
Mar 01 Javascript
vue组件中的数据传递方法
May 14 Javascript
浅谈express.js框架中间件(middleware)
Apr 07 Javascript
Angular CLI发布路径的配置项浅析
Mar 29 Javascript
Javascript新手入门之字符串拼接与变量的应用
Dec 03 #Javascript
vue表单验证之禁止input输入框输入空格
Dec 03 #Vue.js
微信小程序实现首页弹出广告
Dec 03 #Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
Dec 03 #Javascript
基于javascript实现放大镜特效
Dec 03 #Javascript
javascript实现时钟动画
Dec 03 #Javascript
javascript中导出与导入实现模块化管理教程
Dec 03 #Javascript
You might like
由php if 想到的些问题
2008/03/22 PHP
php正则表达式(regar expression)
2011/09/10 PHP
php 自定义错误日志实例详解
2016/11/12 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
Smarty模板变量与调节器实例详解
2019/07/20 PHP
javascript延时重复执行函数 lLoopRun.js
2007/06/29 Javascript
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
2010/04/20 Javascript
jQuery 锚点跳转滚动条平滑滚动一句话代码
2010/04/30 Javascript
动态加载脚本提升javascript性能
2014/02/24 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
2016/08/24 Javascript
Node.js成为Web应用开发最佳选择的原因
2018/02/05 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
2018/04/17 Javascript
详解JavaScript中的数组合并方法和对象合并方法
2018/05/11 Javascript
JavaScript设计模式之建造者模式实例教程
2018/07/02 Javascript
详解关于vue2.0工程发布上线操作步骤
2018/09/27 Javascript
vue中使用element组件时事件想要传递其他参数的问题
2019/09/18 Javascript
原生JS实现pc端轮播图效果
2020/12/21 Javascript
实例探究Python以并发方式编写高性能端口扫描器的方法
2016/06/14 Python
用python代码将tiff图片存储到jpg的方法
2018/12/04 Python
对python中assert、isinstance的用法详解
2019/11/27 Python
Python实现屏幕录制功能的代码
2020/03/02 Python
详解Python 实现 ZeroMQ 的三种基本工作模式
2020/03/24 Python
python Socket网络编程实现C/S模式和P2P
2020/06/22 Python
Python Pandas数据分析工具用法实例
2020/11/05 Python
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
2017/07/11 HTML / CSS
英国邮购活的植物主要供应商:Gardening Direct
2019/01/28 全球购物
高级Java程序员面试题
2016/06/23 面试题
行政人员工作职责
2013/12/05 职场文书
母亲80寿诞答谢词
2014/01/16 职场文书
弘扬职业精神演讲稿
2014/03/20 职场文书
公益广告标语
2014/06/19 职场文书
民间个人借款协议书
2014/09/30 职场文书
2014年文员工作总结
2014/11/18 职场文书
公司副总经理岗位职责
2015/04/08 职场文书
2015安全保卫工作总结
2015/04/25 职场文书
Mysql systemctl start mysqld报错的问题解决
2021/06/03 MySQL