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

超文本标记语言部分代码：

div class=' _ touch ' div class=' round _ box ' ref=' box ' @ touch start=' touch start ' @ touch move=' touch move ' div v-if=' able ' style=' position : absolute；宽度：100%;高度：100%;top :0 ' left :0 ' div class=' round _ right ' ref=' right ' : style=' { transform : ' rotate(' angle ' deg ')' } ' div class=' round _ info '/div/div class=' round _ num ' { level } }/div/div less样式部分代码：_ touch { padding-top : 48px；圆形盒{位置：相对；宽度： 54%;填充-前：名54%；margin: 0自动背景-图像：网址（././assets/img/round _ box。巴布亚新几内亚)；背景尺寸：汽车100%;背景-位置：中央顶部；背景-重复：不重复；round _ right { width : 8%；高： 27%;绝对位置：左： 46%;前：名23%；转换-原始： 50% 100%;-web套件-转换-origin : 50% 100%；z-index : 2；round_info { background:线性渐变(#858585，# B3B3B3)；背景：-网络套件-渐变(# 858585，# B3B3B3)；背景技术：-moz-线性梯度(#858585，# B3B3B3)；宽度： 100%;填充-top : 100%；边界半径： 100%;} } .round _ num {显示：内联块；绝对位置：z-index : 1；文本对齐：中心；宽度： 30%;前：名38%；左侧： 35%;font-size : 2.4 em字体粗细： 900；背景技术：线性梯度(#b0b0b0，# c8 c8)；背景：-web套件-渐变(# b0b0b 0，# c8c 8 c8)；-web kit-背景-clip:文本；背景-夹子：文本；-webkit-text-fill-color:透明；文本-填充-颜色：透明；} }}js部分代码：

methods: {.TouchStart(e){ e . PreventDefault()；e . stopperpagation()；让圆形框=这个$ refs.boxvar w=round _ box。偏移量为/2；var h=圆框。偏置1/2；这个。px=圆框。getboundingclientrect().左w；这个。py=圆框。getboundingclientrect().top h；}，触摸移动(e){ e . prevent default()；e . stopperpagation()；这个。GetAngle(例如changedTouches[0]).clientX，e.changedTouches[0].clientY)；}，触摸end(e){ e . prevent default()；e . stopperpagation()；}，resetango(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让结果=list.filter(函数(currentVal，index，arr){返回数学。防抱死制动系统(角度-电流值。角度)=18；});this.angle=结果[0]。角度；this.level=结果[0]。水平；}，getAngle(mx，my){ var px=this。px；var py=this.pyvar x=Math。ABS(px-MX)；var y=数学。腹肌(py-my)；var z=Math.sqrt(Math.pow(x，2) Math.pow(y，2))；var cos=y/z；var radina=数学。助理文书主任；//用反三角函数求弧度可变角度=数学地板(180 /(数学.PI/radina))；//将弧度转换成角度if (mx px my py) { //鼠标在第四象限角度=180度角；} if (mx==px my py) { //鼠标在y轴负方向上角度=180 ;} if (mx px my==py) { //鼠标在x轴正方向上角度=90 ;} if (mx px my py) { //鼠标在第三象限角度=180度角；} if (mx px my==py) { //鼠标在x轴负方向角度=270 ;} if (mx px my py) { //鼠标在第二象限角度=360度；} this.angle=angle这个$ nextTick(function(){ this。重新纠结(这个。角度)；});},主要的思路是根据监听。圆形盒元素的触摸移动事件获取手指相对于圆心这条直线的旋转角度（变换：旋转),

并把旋转角度同步到水平居中于。圆形盒容器，底边框中心与。圆形盒重合的元素：向右舍入上，使它相对于。圆形盒的圆心旋转即可。

注：圆形盒圆心如下：

注：向右舍入元素如下：

总结

以上所述是小编给大家介绍的基于某视频剪辑软件实现移动端圆形旋钮插件效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！