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 相关文章推荐
javascript,jquery闭包概念分析
Jun 19 Javascript
jquery实现文本框鼠标右击无效以及不能输入的代码
Nov 05 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
May 07 Javascript
jQuery设置div一直在页面顶部显示的方法
Oct 24 Javascript
javascript实现节点(div)名称编辑
Dec 17 Javascript
jQuery控制cookie过期时间的方法
Apr 07 Javascript
浅谈Javascript的静态属性和原型属性
May 07 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
May 24 Javascript
Angularjs之filter过滤器(推荐)
Nov 27 Javascript
详解在AngularJS的controller外部直接获取$scope
Jun 02 Javascript
python爬取安居客二手房网站数据(实例讲解)
Oct 19 Javascript
Vue3新特性之在Composition API中使用CSS Modules
Jul 13 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包含文件函数include、include_once、require、require_once区别总结
2014/04/05 PHP
php版微信返回用户text输入的方法
2016/11/14 PHP
PHP abstract 抽象类定义与用法示例
2018/05/29 PHP
PHP实现文件上传操作和封装
2020/03/04 PHP
JavaScript静态的动态
2006/09/18 Javascript
Prototype1.5 rc2版指南最后一篇之Position
2007/01/10 Javascript
js写一个弹出层并锁屏效果实现代码
2012/12/07 Javascript
jquery提取元素里的纯文本不包含span等里的内容
2013/09/30 Javascript
JavaScript日期时间与时间戳的转换函数分享
2015/01/31 Javascript
微信小程序 window_x64环境搭建
2016/09/30 Javascript
Javascript中内建函数reduce的应用详解
2016/10/20 Javascript
基于jQuery实现的打字机效果
2017/01/16 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
2020/06/19 Javascript
jquery+css实现简单的图片轮播效果
2017/08/07 jQuery
jquery手机触屏滑动拼音字母城市选择器的实例代码
2017/12/11 jQuery
vue中keep-alive,include的缓存问题
2019/11/26 Javascript
jquery实现两个div中的元素相互拖动的方法分析
2020/04/05 jQuery
Node 使用express-http-proxy 做api网关的实现
2020/10/15 Javascript
[07:52]2014DOTA2 TI逗比武士游V社解说背后的故事
2014/07/10 DOTA
[04:28]DOTA2亚洲邀请赛小组赛第五日 TOP10精彩集锦
2015/02/03 DOTA
使用Python中的tkinter模块作图的方法
2017/02/07 Python
Pandas过滤dataframe中包含特定字符串的数据方法
2018/11/07 Python
使用Python正则表达式操作文本数据的方法
2019/05/14 Python
如何用C代码给Python写扩展库(Cython)
2019/05/17 Python
Django处理Ajax发送的Get请求代码详解
2019/07/29 Python
FFrpc python客户端lib使用解析
2019/08/24 Python
Ubuntu18.04安装 PyCharm并使用 Anaconda 管理的Python环境
2020/04/08 Python
Window10上Tensorflow的安装(CPU和GPU版本)
2020/12/15 Python
HTML5 video 视频标签使用介绍
2014/02/03 HTML / CSS
Theflamel意大利:女士奢华服装、鞋子和配件
2020/01/11 全球购物
维护民族团结演讲稿
2014/08/27 职场文书
公司离职证明范本(汇总)
2014/09/10 职场文书
践行三严三实心得体会
2014/10/13 职场文书
珍爱生命主题班会
2015/08/13 职场文书
公务员学习中国梦心得体会
2016/01/05 职场文书
修改Nginx配置返回指定content-type的方法
2022/09/23 Servers