div可以设置鼠标悬浮状态吗_web高仿樊登 H5/微信音乐播放悬浮球效果

阅读本文大概需要 9 分钟。

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

先来看看樊登 H5 的效果。

再来看看我的实现。

还行吧，哈哈。其实实现起来也不复杂，主要是一步步想清楚下面的步骤：

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

第二步：停止滑动时，小球吸边效果

第三步：点击吸边状态下的小球，变换为音频播放控制面板，点击毛玻璃，恢复成小球

第四步：背景毛玻璃效果

一步步来说。

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

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

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

class="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.circleWidth / 2目的是让手指按在悬浮球正中  let offsetY = e.targetTouches[0].clientY - this.circleHeight / 2; //减去this.circleHeight / 2目的是让手指按在悬浮球正中  if (offsetX <= 0 + this.placeholderWidth) {    offsetX = 0 + this.placeholderWidth; //不让悬浮球完全贴边  } else if (    offsetX >=    document.documentElement.clientWidth -      this.circleWidth -      this.placeholderWidth //微信悬浮球不是完全贴边，离屏幕边缘有一段距离  ) {    offsetX =      document.documentElement.clientWidth -      this.circleWidth -      this.placeholderWidth;  }  if (offsetY <= 0 + this.placeholderWidth) {    offsetY = 0 + this.placeholderWidth;  } else if (    offsetY >=    document.documentElement.clientHeight -      this.circleHeight -      this.placeholderWidth  ) {    offsetY =      document.documentElement.clientHeight -      this.circleHeight -      this.placeholderWidth;  }  this.$refs.circle.style.left = offsetX + "px";  this.$refs.circle.style.top = offsetY + "px";}

第二步：停止滑动，悬浮球吸边效果

滑动小球，当手指松开时，小球需要吸附到屏幕边缘。

根据小球中心的 x 坐标判断，如果 x 坐标小于屏幕宽度的一半，就吸附到屏幕左边，如果大于等于屏幕宽的一半则吸附到屏幕右边，实现代码走一波：

//touchend的时候，悬浮球吸边显示handleTouchEnd(e) {  this.isAnimated = true; //手指拖动小球滑动的时候不需要动画，滑动停止的时候添加动画  let circleCenterX =    parseInt(this.$refs.circle.style.left.replace("px", "")) +    this.circleWidth / 2; //悬浮球中心的x坐标  let circleCenterY =    parseInt(this.$refs.circle.style.top.replace("px", "")) +    this.circleHeight / 2; //悬浮球中心的y坐标  if (circleCenterX < this.clientWidth / 2) {    //吸附左侧    this.$refs.circle.style.left = 0;    this.$refs.circle.style.borderRadius = "0 50% 50% 0";  } else {    //吸附在右侧    this.$refs.circle.style.left =      this.clientWidth - this.circleWidth + "px";    this.$refs.circle.style.borderRadius = "50% 0 0 50%";  }  if (circleCenterY >= this.clientHeight - this.placeholderBottom) {    this.$refs.circle.style.top =      this.clientHeight - this.placeholderBottom + "px";  }}

第三步：点击吸边状态下的小球，变换为音频播放控制面板

当小球吸附到屏幕边缘时，点击小球，小球展开成音频控制面板，点击毛玻璃背景，小球收缩恢复原状。

在实现时我将小球 circle 跟音频控制面板 content 分开布局，大概是这个样子。

<div  class="circle-box"  :class="{        opened: showCircleContent,        animation: isAnimated      }"  ref="circle">  <div class="content" v-if="showCircleContent">      div>  <div class="circle" v-if="!showCircleContent">      div>div>

使用 circle-box 包裹悬浮小球 circle 和音频控制面板 content，使用变量 showCircleContent 来判断当前应该显示悬浮球还是音频播放控制面板。

当点击悬浮球时 showCircleContent 为 true，小球伸长变换为音频播放控制面板。

点击毛玻璃背景，设置 showCircleContent 为 false，音频播放控制面板收缩恢复成悬浮小球。

伸缩动画

小球从悬浮球变为音频控制面板，或者从控制面板变为悬浮球时是有动画的，这个动画应该在 touchend 的时候才添加，在 touchmove 的时候去掉。因为小球滑动时如果有动画的话，会有卡顿的现象。

使用 isAnimated 来控制动画的添加和删除，在 touchend 的时候为 true，在 touchmove 改为 false。

第四步：背景毛玻璃效果

backdrop-filter 属性实现毛玻璃了解一下，filter 只能让当前元素有模糊效果，当前元素之下的元素还是清晰的。而 backdrop-filter 可以让当前元素及以下的元素都模糊，从而实现毛玻璃的效果。

backdrop-filter: blur(10px); //毛玻璃效果，ios有效-webkit-backdrop-filter: blur(10px);

但是目前 backdrop-filter 的兼容性不是太好，在 IOS 平台能看到毛玻璃效果，Android 平台看不到。

OK，以上就是实现音乐播放悬浮球的思路总结，其实在实现过程中还有很多细节上的处理，想了解更多细节，源码地址走一波。

对你有帮助的话老铁双击来个star，practice-demo下的float-circle-demo即为悬浮小球demo，github地址走一个：

https://github.com/heyzqt/practice-demo

如果对你有帮助的话，点赞、在看、star都是对我的鼓励，也是支持我写下去的动力，谢谢！

一个贼爱折腾的码农，

有趣的人生需要大胆尝试！