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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 泛谈JS逻辑判断选择器 || &&

    泛谈JS逻辑判断选择器 || &&

    前言 || 与 &&在JS里与其它语言不一样,这是选择器运算符,而非逻辑运算符. 对于||来说,若判断为true,则返回第一个值,为false返回第二个值. &&相反,若判断为 true,则返回第二个,为 false为返回第一个值. 绝对不是像其它语言那样返回true或false,而是会返回第一个值或第二个值. 简单的测试代码 先是true与false的测试,后将false改为数值0. 除了|| 与&&之外易让人疑惑外,JS里的假值表也算是个大疑点. let

  • Javascript封装id、class与元素选择器方法示例

    由于各个浏览器都支持的选择方法只有如下三种: 1.document.getElementById() 2.document.getElementsByName() 3.document.getElementsByTagName() 所以在封装选择器的时候要考虑浏览器的兼容性. 示例代码如下: <script>//封装id选择器 function $(selector){ var c=selector.substring(0,1);//获取第一个字符 if(c=="#"){

  • Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能

    具体代码如下所述: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Vue.js中使用iView日期选择器并设置开始时间结束时间校验</title> <!-- import Vue.js --> <script src="//vuejs.org/js/vue.min.js"></script

  • 了解JavaScript中的选择器

    在html5之前只有下面四种选择器 .getElementById("id")id选择器; .getElementsByName("name")name选择器; .getElementsByTagName("tagname")tag标签名选择器: .getElementsByClassName(".classname").class名选择器 示例代码: <!DOCTYPE html><html><

  • js实现精确到秒的日期选择器完整实例

    本文实例讲述了js实现精确到秒的日期选择器.分享给大家供大家参考,具体如下: <script> // 主调用函数是 setday(this,[object])和setday(this),[object]是控件输出的控件名,举两个例子: // 一.<input name=txt><input type=button value=setday onclick="setday(this,document.all.txt)"> // 二.<input

  • 浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)

    浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)

    虽然经常用 但是 今天用这个去选的时候,发现怎么都设置不上值 经调查, id选择器是选择页面内全部的对象中的第一个 问题就在这------------因为以前项目里面没有说对这个弹出框做什么操作,所有id重复了也没管. 所以, 需要注意: id选择器选择的是所有里面的一个,(虽然,也是返回在一个数组里面) 而类选择器选择的是一个数组. 如下: 以上这篇浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • JS仿JQuery选择器功能

    JQuery作为应用最广的JS库,其最强大的功能之一就是几乎涵盖所有方法的且代码十分简短的选择器功能,我们也可用自己的代码实现此功能,代码逻辑.使用方法与JQuery一致 function ZQuery(arg){ this.elements = []; //存东西 this.domString = ''; //保存字符串标签 if(typeof arg=='function'){ //DOMReady DOMReady(arg); }else if(typeof arg=='string'||

  • js实现类选择器和name属性选择器的示例步骤

    jQuery的出现,大大的提升了我们操作dom的效率,使得我们的开发更上一层楼,如jQuery的选择器就是一个很强大的功能,它包含了类选择器.id选择器.属性选择器.元素选择器.层级选择器.内容筛选选择器等等,很是方便快捷,并且这些选择器的兼容性都很好,可以说操作dom使用jq选择器一时爽,一直使用一直爽!只是,目前Vue.React.Angular三大框架的出现大大降低了JQuery的使用频率,而且JQuery在操作dom和绑定数据时确实存在一定的性能问题和各种坑,但依旧不可抹杀jq在操作do

  • vue2.0.js的多级联动选择器实现方法

    由于工作需求,想实现一个多级联动选择器,但是网上现有的联动选择器都不是我想要的,我参照基于vue2.0的element-ui中的Cascader级联选择器的样式实现了复合自己要求的多级联动选择器,原理很简单,不多说,直接上代码... <template> <div id="app"> <div class="select"> <div class="input_text"><input typ

  • 浅谈JS中的常用选择器及属性、方法的调用

    选择器.属性及方法调用的配合使用: <style> #a{ width: 200px; height: 100px; background-color: red; } .b{ width: 200px; height: 100px; background-color: green; } .div1{ width: 200px; height: 100px; background-color:aqua; } </style> <body> <div id="

随机推荐