互联网技术 · 2024年2月23日

用JavaScript实现圆形菜单选择器

这篇文章主要为大家详细介绍了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;
      top: 0;
      left: 125px;
      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++) {
   &

OpenMagic API

Need more than content? Move into the product flow.

If you are here for model access, pricing, developer docs, or the future API console, the dedicated product path now lives on api.openmagic.ai.

登录免费注册