web高仿樊登H5/微信音乐播放悬浮球效果

本文主要是介绍web高仿樊登H5/微信音乐播放悬浮球效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

这两天完成了一个仿樊登 H5 的音乐播放悬浮球效果，这个效果跟微信音乐播放悬浮球的效果也很相似，今天总结一下实现的思路过程（基于 Vue 实现）。

先来看看樊登 H5 的效果。

樊登H5音乐播放悬浮球

再来看看我的实现，挺完美的，哈哈。

悬浮球
实现起来也不复杂，主要是一步步想清楚下面的实现步骤：

第一步：小球被限制在固定范围内滑动
第二步：停止滑动时，小球吸边效果
第三步：点击吸边状态下的小球，变换为音频播放控制面板，点击毛玻璃，恢复成小球
第四步：背景毛玻璃效果

一步步来说。

第一步：小球被限制在固定范围内滑动

touchmove可以获得小球的滑动事件，所以可以使用touchmove来限制小球的滑动范围。

先给小球的 touchmove 传入 handleTouchMove 函数，在 handleTouchMove 中获取到滑动事件 e，使用 e.targetTouches[0]可以获得手指滑动的坐标 clientX 和 clientY，来计算小球 left、top 值，从而来控制小球随手指滑动。

      <divclass="circle"v-if="!showCircleContent"@click="handleClickCircle"@touchend="handleTouchEnd"@touchmove.prevent="handleTouchMove"></div>

当手指或鼠标滑动到超过屏幕的左边界时，就将小球的 left 重置为 0，不让小球超出左边界。当滑动超过右边界时，就将小球的 left 重置为视口的宽度减去小球的宽度，不让小球超出右边界。

顶部和底部边界也一样，当手指或鼠标滑动到超过顶部边界时，将小球的 top 重置为 0，超过底部边界时，将 top 重置为视口的高度减去小球的高度。

当然滑动范围可以自己来控制，详细控制小球滑动的代码如下：

    //限制悬浮球一个范围内滑动handleTouchMove(e) {this.isAnimated = false;  //手指拖动小球滑动的时候不需要动画，滑动停止的时候添加动画this.$refs.circle.style.borderRadius = "50%";let offsetX = e.targetTouches[0].clientX - this.circleWidth / 2; //减去this.circleWidt