基于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 相关文章推荐
基于jQuery的仿flash的广告轮播
Nov 05 Javascript
jQuery EasyUI API 中文文档 - Panel面板
Sep 30 Javascript
热点新闻滚动特效的js代码
Aug 17 Javascript
JS网页图片按比例自适应缩放实现方法
Jan 15 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
Aug 21 Javascript
Bootstrap每天必学之下拉菜单
Nov 25 Javascript
简单了解JavaScript操作XPath的一些基本方法
Jun 03 Javascript
深入浅析knockout源码分析之订阅
Jul 12 Javascript
微信小程序  生命周期详解
Oct 27 Javascript
JQueryEasyUI之DataGrid数据显示
Nov 23 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
Vue ElementUI之Form表单验证遇到的问题
Aug 21 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
php cache类代码(php数据缓存类)
2010/04/15 PHP
Uncaught exception com_exception with message Failed to create COM object
2012/01/11 PHP
php在服务器执行exec命令失败的解决方法
2012/03/03 PHP
php+mysql数据库实现无限分类的方法
2014/12/12 PHP
PHP实现懒加载的方法
2015/03/07 PHP
PHP记录搜索引擎蜘蛛访问网站足迹的方法
2015/04/15 PHP
php 使用curl模拟ip和来源进行访问的实现方法
2017/05/02 PHP
php apache开启跨域模式过程详解
2019/07/08 PHP
最新优化收藏到网摘代码(digg,diigo)
2007/02/07 Javascript
基于MooTools的很有创意的滚动条时钟动画
2010/11/14 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
2015/03/13 Javascript
详解AngularJS的通信机制
2015/06/18 Javascript
文字垂直滚动之javascript代码
2015/07/29 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
2016/07/01 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
2017/04/16 Javascript
React项目动态设置title标题的方法示例
2018/09/26 Javascript
微信小程序实现单选功能
2018/10/30 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
2018/11/25 Javascript
vue单文件组件无法获取$refs的问题
2020/06/24 Javascript
[02:04]2020年夜魇暗潮预告片
2020/10/30 DOTA
解决Pycharm中import时无法识别自己写的程序方法
2018/05/18 Python
对numpy中向量式三目运算符详解
2018/10/31 Python
Python中extend和append的区别讲解
2019/01/24 Python
python3对拉勾数据进行可视化分析的方法详解
2019/04/03 Python
Python3和PyCharm安装与环境配置【图文教程】
2020/02/14 Python
Python中的None与 NULL(即空字符)的区别详解
2020/09/24 Python
html5中使用hotcss.js实现手机端自适配的方法
2020/04/23 HTML / CSS
英国领先的维生素和补充剂品牌:Higher Nature
2019/08/26 全球购物
竞选生活委员演讲稿
2014/04/28 职场文书
怎样写离婚协议书
2014/09/10 职场文书
工作年限证明模板
2014/11/01 职场文书
公务员政审个人总结
2015/02/12 职场文书
2015年银行柜员工作总结报告
2015/04/01 职场文书
会议主持人开场白台词
2015/05/28 职场文书
幼儿园元旦主持词
2015/07/06 职场文书
2015年暑假工作总结
2015/07/13 职场文书