网页高仿饭登H5-微信音乐播放浮球效果

当手指或鼠标向左滑动时当屏幕到达边界时，将小球的左侧重置为0，以防止小球超出左边界。当滑动超出右边界时，将球的左侧重置为视口的宽度减去球的宽度，使球不超出右边界。顶部和底部边界也一样，当手指或鼠标滑过顶部边界时，将小球的top重置为0，超过底部边界时，将top重置为视口的高度减去视口的高度球。当然滑动幅度可以自己控制。详细控制小球滑动的代码如下：//限制小球在一个范围内滑动handleTouchMove(e){this.isAnimated=false;//手指拖动小球滑动时不需要动画，滑动停止时添加动画this.$refs.circle.style.borderRadius="50%";让offsetX=e.targetTouches[0].clientX-this.circleWidth/2;//减去this.circleWidth/2目的是让手指按在浮球中间letoffsetY=e.targetTouches[0].clientY-this.circleHeight/2;//减去this.circleHeight/2的目的是让手指按在浮球中间if(offsetX<=0+this.placeholderWidth){offsetX=0+this.placeholderWidth;//不允许浮球完全对齐}elseif(offsetX>=document.documentElement.clientWidth-this.circleWidth-this.placeholderWidth//微信浮球没有完全对齐，离边缘有一段距离screen){offsetX=document.documentElement.clientWidth-this.circleWidth-this.placeholderWidth;}if(offsetY<=0+this.placeholderWidth){offsetY=0+this.placeholderWidth;}elseif(offsetY>=document.documentElement.clientHeight-this.circleHeight-this.placeholderWidth){offsetY=document.documentElement.clientHeight-this.circleHeight-this.placeholderWidth;}this.$refs.circle.style.left=offsetX+"px";这.$refs.circle.style.top=offsetY+"px";},Step2:停止滑动，浮球会随着吸边效果滑动小球。手指松开时，小球需要吸附到屏幕边缘通过小球中心的x坐标判断，如果x坐标小于屏幕宽度的一半，就会吸附到屏幕左侧，如果大于等于屏幕宽度的一半，它会被吸附到屏幕右侧，代码会经过一个wave：//touchend时，hover球吸边显示handleTouchEnd(e){this.isAnimated=true;//手指拖动小球滑动时不需要动画，滑动停止时加入动画letcircleCenterX=parseInt(this.$refs.circle.style.left.replace("px",""))+this.circleWidth/2;//浮球中心x坐标letcircleCenterY=parseInt(this.$refs.circle.style.top.replace("px",""))+this.circleHeight/2;//浮球中心的y坐标if(circleCenterX=this.clientHeight-this.placeholderBottom){this.$refs.circle.style.top=this.clientHeight-这个。占位符BottOM+“像素”；}},第三步：点击吸边球，变身为音频播放控制面板。当小球贴在屏幕边缘时，点击小球，小球就会展开成一个音频控制面板。单击磨砂玻璃背景。当球收缩并恢复到原来的形状时，我将球的圆圈与音频控制面板的内容分开，如下所示。