js implementiert eine kreisförmige Menüauswahl-js-Tutorial-php.cn

js implementiert eine kreisförmige Menüauswahl

coldplay.xixi

Freigeben： 2020-12-07 17:54:35

nach vorne

2918 Leute haben es durchsucht

Die Spalte

js implementiert eine kreisförmige Menüauswahl

Javascript enthält den spezifischen Code für die Implementierung des kreisförmigen Menüselektors in js als Referenz. Der spezifische Inhalt lautet wie folgt:

Javascript

(Video) js implementiert eine kreisförmige Menüauswahl

Code:

<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>p {
      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>p {
      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>
  <p class="mask"></p>
  <p class="con">
  </p>
  <p class="con1">
  </p>
  <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("p");
        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>p")
          for (var i = 0, len = cons.length; i < len; i++) {
            cons[i].style.color = "black"
          }
          document.querySelector("p[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("p");
        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>p")
          for (var i = 0, len = cons.length; i < len; i++) {
            cons[i].style.color = "black"
          }
          document.querySelector("p[index1=\"" + index % len + "\"]").style.color = "red"
        }
      }, false);
      document.addEventListener("mouseup", function (e) { mouseDown = false; }, false);
 
    }
  </script>
</body>
 
</html>

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.

Verwandte kostenlose Lernempfehlungen:

php-Programmierung

(Video)

Das obige ist der detaillierte Inhalt vonjs implementiert eine kreisförmige Menüauswahl. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!