基于vue实现移动端圆形旋钮插件效果


Posted in Javascript onNovember 28, 2018

最近公司有一个项目的需要做出旋钮的效果,旋钮有十个档,根据手指旋转切换,旋转时接近最近的档会有吸附效果,具体效果如下:

基于vue实现移动端圆形旋钮插件效果

html部分代码:

<div class="_touch">
 <div class="round_box" ref="box" @touchstart="touchStart" @touchmove="touchMove">
  <div v-if="able" style="position:absolute;width:100%;height:100%;top:0;left:0;">
   <div class="round_right" ref="right" :style="{ transform: 'rotate(' + angle +'deg)' }">
    <div class="round_info"></div>
   </div>
   <div class="round_num">{{level}}</div>
  </div>
 </div>
</div>

less样式部分代码:

._touch {
 padding-top: 48px;
 .round_box {
  position: relative;
  width: 54%;
  padding-top: 54%;
  margin: 0 auto;
  background-image: url(../../assets/img/round_box.png);
  background-size: auto 100%;
  background-position: center top;
  background-repeat: no-repeat;
  .round_right {
   width: 8%;
   height: 27%;
   position: absolute;
   left: 46%;
   top: 23%;
   transform-origin: 50% 100%;
   -webkit-transform-origin: 50% 100%;
   z-index: 2;
   .round_info {
    background: linear-gradient(#858585, #b3b3b3);
    background: -webkit-gradient(#858585, #b3b3b3);
    background: -moz-linear-gradient(#858585, #b3b3b3);
    width: 100%;
    padding-top: 100%;
    border-radius: 100%;
   }
  }
  .round_num {
   display: inline-block;
   position: absolute;
   z-index: 1;
   text-align: center;
   width: 30%;
   top: 38%;
   left: 35%;
   font-size: 2.4em;
   font-weight: 900;
   background: linear-gradient(#b0b0b0, #c8c8c8);
   background: -webkit-gradient(#b0b0b0, #c8c8c8);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
   text-fill-color: transparent;
  }
 }
}

js部分代码:

methods: {
 ......,
 touchStart(e) {
  e.preventDefault();
  e.stopPropagation();
  let round_box = this.$refs.box;
  var w = round_box.offsetWidth / 2;
  var h = round_box.offsetHeight / 2;
  this.px = round_box.getBoundingClientRect().left + w;
  this.py = round_box.getBoundingClientRect().top + h;
 },
 touchMove(e) {
  e.preventDefault();
  e.stopPropagation();
  this.getAngle(e.changedTouches[0].clientX, e.changedTouches[0].clientY);
 },
 touchEnd(e) {
  e.preventDefault();
  e.stopPropagation();
 },
 resetAngle(angle) {
  let list = [
   { angle: 0, level: 5 },
   { angle: 36, level: 6 },
   { angle: 72, level: 7 },
   { angle: 108, level: 8 },
   { angle: 144, level: 9 },
   { angle: 180, level: 10 },
   { angle: 216, level: 1 },
   { angle: 252, level: 2 },
   { angle: 288, level: 3 },
   { angle: 324, level: 4 },
   { angle: 360, level: 5 }
  ];
  let result = list.filter(function(currentVal, index, arr) {
   return Math.abs(angle - currentVal.angle) <= 18;
  });
  this.angle = result[0].angle;
  this.level = result[0].level;
 },
 getAngle(mx, my) {
  var px = this.px;
  var py = this.py;
  var x = Math.abs(px - mx);
  var y = Math.abs(py - my);
  var z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
  var cos = y / z;
  var radina = Math.acos(cos); //用反三角函数求弧度
  var angle = Math.floor(180 / (Math.PI / radina)); //将弧度转换成角度
  if (mx > px && my > py) {
   //鼠标在第四象限
   angle = 180 - angle;
  }
  if (mx == px && my > py) {
   //鼠标在y轴负方向上
   angle = 180;
  }
  if (mx > px && my == py) {
   //鼠标在x轴正方向上
   angle = 90;
  }
  if (mx < px && my > py) {
   //鼠标在第三象限
   angle = 180 + angle;
  }
  if (mx < px && my == py) {
   //鼠标在x轴负方向
   angle = 270;
  }
  if (mx < px && my < py) {
   //鼠标在第二象限
   angle = 360 - angle;
  }
  this.angle = angle;
  this.$nextTick(function() {
   this.resetAngle(this.angle);
  });
 },
......

主要的思路是根据监听 .round_box 元素的 touchmove 事件获取手指相对于圆心这条直线的旋转角度(transform : rotate),

并把旋转角度同步到水平居中于 .round_box 容器,底边框中心与 .round_box重合的元素 : .round_right 上,使它相对于

.round_box的圆心旋转即可。

注:.round_box圆心如下:

基于vue实现移动端圆形旋钮插件效果

注:.round_right 元素如下:

基于vue实现移动端圆形旋钮插件效果

总结

以上所述是小编给大家介绍的基于vue实现移动端圆形旋钮插件效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript实现简单的富文本编辑器附演示
Jun 16 Javascript
推荐10 个很棒的 jQuery 特效代码
Oct 04 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
Feb 14 Javascript
使用jQuery或者原生js实现鼠标滚动加载页面新数据
Mar 06 Javascript
Bootstrap编写导航栏和登陆框
May 30 Javascript
jQuery绑定事件的四种方式介绍
Oct 31 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
Dec 26 Javascript
JS百度地图搜索悬浮窗功能
Jan 12 Javascript
JavaScript实现反转字符串的方法详解
Apr 27 Javascript
angular4自定义组件详解
Sep 28 Javascript
Node.js log4js日志管理详解
Jul 31 Javascript
React 使用recharts实现散点地图的示例代码
Dec 07 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
Nov 28 #Javascript
Vue触发式全局组件构建的方法
Nov 28 #Javascript
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
Nov 28 #Javascript
jQuery实现购物车的总价计算和总价传值功能
Nov 28 #jQuery
vue与原生app的对接交互的方法(混合开发)
Nov 28 #Javascript
vue微信分享出来的链接点开是首页问题的解决方法
Nov 28 #Javascript
vue实现微信分享功能
Nov 28 #Javascript
You might like
使用MaxMind 根据IP地址对访问者定位
2006/10/09 PHP
在线增减.htpasswd内的用户
2006/10/09 PHP
php文件服务实现虚拟挂载其他目录示例
2014/04/17 PHP
php文件缓存类用法实例分析
2015/04/22 PHP
也说JavaScript中String类的replace函数
2011/09/22 Javascript
javascript中的undefined和not defined区别示例介绍
2014/02/26 Javascript
Jquery插件编写简明教程
2014/03/25 Javascript
标题过长使用javascript按字节截取字符串
2014/04/24 Javascript
JavaScript立即执行函数的三种不同写法
2014/09/05 Javascript
jQuery实现统计复选框选中数量
2014/11/24 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
2015/01/27 Javascript
js图片模糊切换显示特效的方法
2015/02/17 Javascript
JS实现超炫网页烟花动画效果的方法
2015/03/02 Javascript
利用js实现禁止复制文本信息
2015/06/03 Javascript
使用堆实现Top K算法(JS实现)
2015/12/25 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
2016/01/18 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
2016/11/07 Javascript
详解js中==与===的区别
2017/01/08 Javascript
jQuery插件DataTables分页开发心得体会
2017/08/22 jQuery
vue中的自定义分页插件组件的示例
2018/08/18 Javascript
js实现每日签到功能
2018/11/29 Javascript
详解webpack引入第三方库的方式以及注意事项
2019/01/15 Javascript
[00:50]2014DOTA2国际邀请赛 NEWBEE战队回顾
2014/08/01 DOTA
Python写入数据到MP3文件中的方法
2015/07/10 Python
django+xadmin+djcelery实现后台管理定时任务
2018/08/14 Python
10个Python小技巧你值得拥有
2018/09/29 Python
使用python对多个txt文件中的数据进行筛选的方法
2019/07/10 Python
关于python tushare Tkinter构建的简单股票可视化查询系统(Beta v0.13)
2020/10/19 Python
阿根廷在线宠物商店:Puppis
2018/03/23 全球购物
美国综合购物商城:UnbeatableSale.com
2018/11/28 全球购物
就业自我评价
2014/02/04 职场文书
学生偷窃检讨书
2014/09/25 职场文书
办护照工作证明
2014/10/01 职场文书
电台广播稿范文
2015/08/19 职场文书
python控制台打印log输出重复的解决方法
2021/05/14 Python
利用Python实时获取steam特惠游戏数据
2022/06/25 Python