实现APlayer播放器悬停滑动

🐾番外篇

分享一下我最近在博客上实现的音乐播放器滑动效果~

作为一个喜欢边写代码边听歌的人，我就在博客里加了个音乐播放器，但是它挡到我可爱的嘉然了。经过一番折腾，终于搞定了这个滑动效果🥹

一.想要的效果

• 🫥 默认隐藏在屏幕左侧，只显示折叠按钮
• 🫧 鼠标悬停时从左侧平滑滑入
• 🎧 展开状态下保持稳定显示
• 💫 折叠状态下恢复滑动功能

二.来看看怎么实现的吧~

CSS 样式

@media screen and (min-width: 1001px) {
  /* 当播放器折叠时，先让它藏在屏幕左边 */
  /* 这样就不会遮挡其他内容啦 */
  #player.aplayer.aplayer-fixed.aplayer-narrow {
    transform: translateX(-100%) !important;
    transition: transform 0.4s ease-in-out !important;
  }
  
  /* 把鼠标移过来，播放器就会滑出来 */
  #player.aplayer.aplayer-fixed.aplayer-narrow:hover {
    transform: translateX(0) !important;
  }
  
  /* 点击展开播放列表后，播放器会一直保持显示 */
  #player.aplayer.aplayer-fixed:not(.aplayer-narrow) {
    transform: translateX(0) !important;
    transition: transform 0.4s ease-in-out !important;
  }
  
  /* 点击它来展开或收起播放器 */
  #player.aplayer.aplayer-fixed .aplayer-miniswitcher {
    pointer-events: auto !important;
    opacity: 1 !important;
  }
}

HTML 结构

<!-- 引入播放器的基本样式 -->
<link rel="stylesheet" href="https://files.cnblogs.com/files/blogs/846461/APlayer.min.css?t=1761012640&download=true">

<!-- 这是播放器的主体部分 -->
<!-- 你可以修改这些参数来个性化你的播放器 -->
<div id="player" class="aplayer aplayer-withlist aplayer-fixed" 
     data-id="9509857795"                          <!-- 在这里换上你自己的歌单ID -->
     data-server="tencent"                         <!-- 支持多种音乐平台 -->
     data-type="playlist"                          <!-- 可以播放单个歌曲或整个歌单 -->
     data-order="random"                           <!-- 随机播放让每次都有新鲜感~ -->
     data-fixed="true"                             <!-- 固定在页面边缘，不会随滚动消失 -->
     data-listfolded="true"                        <!-- 默认收起播放列表，保持简洁 -->
     data-theme="#2D8CF0">                         <!-- 喜欢什么颜色？可以在这里修改 -->
</div>

JavaScript代码

<!-- 引入播放器的核心功能 -->
<script src="https://files.cnblogs.com/files/blogs/846461/APlayer.min.js?t=1748919765&download=true"></script>
<script src="https://files.cnblogs.com/files/blogs/846461/Meting.min.js?t=1748919778&download=true"></script>

<script>
// 音乐自动播放
let ref = setInterval(function(){
  isaplay();
}, 2000);
function isaplay(){
  if($(".aplayer-play").length == 1){
    $(".aplayer-play").click()
    clearInterval(ref);
  }
}
</script>

三.结语

🌼通过不断的尝试、调试和优化，终于找到了简洁有效的解决办法。希望这篇详细的记录能够帮助遇到类似需求的开发者~ ヽ(=^･ω･=)丿