实现类似手机悬浮按钮的样式

由于项目需要，想在某个页面实现类似iPhone悬浮按钮的功能。上一题（链接：div上设置了touchmove，结果overflow不起作用），写了按钮上下移动的样式。现在改进了左右移动的切换和对应样式的变化。HTML代码：一开始想通过document.getElementById()改变样式，但是切换的时候会造成延迟，所以用了v-bind判断当前悬浮按钮的位置，然后渲染不同的样式。JavaScript代码：//实际移动端拖拽down(e){this.flags=true;让触摸；constodiv=e.target;事件.触摸？touch=event.touches[0]:touch=事件；this.position.y=touch.clientY;this.position.x=touch.clientX;this.dy=odiv.offsetTop;this.dX=odiv.offsetLeft;constobjImgM=document.getElementById('imgM');objImgM&&(objImgM.style.opacity='1');},move(e){if(this.flags){让触摸；constobjStratch=document.getElementById('stretchBtn');constobjIconImg=document.getElementById('iconImg');constodiv=e.target;事件.触摸？touch=event.touches[0]:touch=事件；this.ny=touch.clientY-this.position.y;this.nx=touch.clientX-this.position.x;this.yPum=this.dy+this.ny;this.XPum=this.dX+this.nx;odiv.style.top=this.yPum+"px";objStratch.style.top=this.yPum+"px";odiv.style.left=this.XPum+"px";objIconImg.style.left=this.XPum+"px";//阻止页面滑动的默认事件；如果遇到滑动问题，请注意是否在1.2获取touchmove默认行为已被禁用if(!event.defaultPrevented){event.preventDefault();}}},false);}},//functionend(e){当鼠标被释放时='0.7');//判断左右移动if(this.XPum){//移动后才有值这个.XPum<(window.screen.width/2)?this.positionNow='left':this.positionNow='right';}this.setBtnPosition();},setBtnPosition(){constobjStratch=document.getElementById('stretchBtn');constobjMove=document.getElementById('divMove');constobjIconImg=document.getElementById('iconImg');if(this.positionNow==='left'){//console.log('inleft~~~~~~')objMove.style.left='0';objStratch.style.left='0';objIconImg.style.left='0';}else{constpositionMove=window.screen.宽度-70;constpositionIconImg=window.screen.width-70;constpositionStratch=window.screen.width-190;objMove.style.left=`${positionMove}px`;objStratch.style.left=`${positionStratch}px`;objIconImg.style.left=`${positionIconImg}px`;}}，其中，比之前的上下移动稍微多了1，X轴的位置变化，及其赋值。像这样：//down(e)this.dX=odiv.offsetLeft;//move(e)this.XPum=this.dX+this.nx;odiv.style.left=this.XPum+"px";objIconImg.style.left=this.XPum+"px";2、按钮半透明样式切换默认值：0.7，点击down为1，松开返回0.7//down(e)constobjImgM=document.getElementById('imgM');objImgM&&(objImgM.style.opacity='1');//move(e)constobjImgM=document.getElementById('imgM');objImgM&&(objImgM.style.opacity='0.7');3.左右位置的判断主要是方法setBtnPosition()。当在右边时，直接得到屏幕宽度减去当前div的宽度。之前想去掉left，设置right=0，但是没有生效。所以改用这个方法，有知道的请留言。让我了解更多。css代码：.stretchBtn{position:fixed;顶部：0；右：0；显示：弹性；弹性方向：行反转；z-指数：1000；最大高度：100px；}.iconImg{位置：固定；显示：弹性；弹性方向：行反转；调整内容：居中；}#imgM{不透明度：0.7；宽度：60px;}.backBtnM{高度：30px;背景：url('~/assets/img/gamePlay/icon2.png')不重复；背景大小：25px25px；边距顶部：-40px；margin-left:15px;}.backBtn{width:70px;高度：48px；背景：url('~/assets/img/gamePlay/back-btn2.png')不重复；背景大小：237%；}.backBtnLeft{宽度：70px；高度：48px；背景：url('~/assets/img/gamePlay/back-btn2.png')不重复；背景大小：237%；变换：rotateY(180deg);}.showStyle{宽度：195px;背景：url('~/assets/img/gamePlay/back-btn2.png')不重复；背景大小：100%50px;}.showStyleLeft{宽度：195px;背景：url('~/assets/img/gamePlay/back-btn.png')不重复；背景-size:100%50px;}.lineImg{显示:flex;弹性方向：行反转；溢出-x：自动；高度：50px；顶部边距：8px；z-index:1999;}.lineImg::-webkit-scrollbar{width:0!important}.imgSpacing{padding:03px;}.divMove{position:fixed;右：0；宽度：70px；高度：43px；背景色：rgba(214,106,106,0);z-index:1999;}.shouqi{display:flex;证明内容：居中；对齐项目：居中；右边距：5px；高度：50px；margin-top:-2px}.shouLeft{display:flex;证明内容：居中；对齐项目：居中；右边距：-128px；高度：50px；margin-top:-2px}.toIndex{margin-top:5px;右边距：15px；}。toIndexLeft{位置：相对；左：-150px；margin-top:5px;}关于一些图片的位置，直接用负边距和定位感觉不太好。希望能在文章中看到更多的各界大侠。诡计。谢谢你。至此，悬浮按钮的样式就完成了。效果图：参考自己手机上的悬浮按钮就行了，呵呵。