Loading... # 博客音乐播放器修改显示更多按钮 ## 1、修改显示属性 ```css #handsome_global_player .aplayer-bar-wrap,#handsome_global_player .aplayer-icon.aplayer-icon-lrc,#handsome_global_player .aplayer-volume-wrap { display: inline; /* opacity:0; */ transition: all .3s } ``` ![][1] ![][2] ## 2、修改宽 width: 170px; ```css .aplayer .aplayer-info .aplayer-controller .aplayer-time { position: relative; right: 0; bottom: 4px; height: 17px; font-size: 11px; padding-left: 7px; width: 170px; // 添加这个 } ``` ![][3] ## 3、修改距离 ```css #handsome_global_player .aplayer-volume-wrap { margin-left: 10px } ``` ![][4] ## 4、显示按钮 调试模式查找 ![][5] ```css .aplayer.aplayer-arrow .aplayer-icon-loop,.aplayer.aplayer-arrow .aplayer-icon-order,.aplayer.aplayer-mobile .aplayer-icon-volume-down { /* display: none; */ } ``` ![][6] ## 5、显示按钮2 可以看到溢出了，解决方案有两种 1. 回到2、3、修改合适的宽和距离 2. 删除不需要显示的 class ![][7] ![][8] 继续调试发现这个按钮跟旁白的圆功能重复了 直接给他隐藏了 ![][9] 删除对应的css 样式 ![][10] [1]: https://a-hxin.cn/usr/uploads/2024/05/2213524503.png [2]: https://a-hxin.cn/usr/uploads/2024/05/2490277594.png [3]: https://a-hxin.cn/usr/uploads/2024/05/3072368531.png [4]: https://a-hxin.cn/usr/uploads/2024/05/1848766782.png [5]: https://a-hxin.cn/usr/uploads/2024/05/1901214739.png [6]: https://a-hxin.cn/usr/uploads/2024/05/1195151482.png [7]: https://a-hxin.cn/usr/uploads/2024/05/2349846744.png [8]: https://a-hxin.cn/usr/uploads/2024/05/1313309508.png [9]: https://a-hxin.cn/usr/uploads/2024/05/2207116046.png [10]: https://a-hxin.cn/usr/uploads/2024/05/868244675.png 最后修改：2024 年 05 月 20 日 © 允许规范转载 打赏 赞赏作者 赞 1 咱们谁跟谁，用不着～