半透明效果的无图按钮队长可能需要

马黑黑 · 发表于 2022-1-19 13:01

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

半透明效果，大概能适应各种背景色，分三部分，使用时注意代码位置：

一、CSS部分（最好放在帖子HTML代码开始之前）：

<style type="text/css">
#btn-box { position: relative; background: transparent; width: 32px; height: 32px; }
#btn-box div { position: absolute; left: 0; top: 0; width: 32px; height: 32px; outline: none; border: none; border-radius: 50%; background: #fff; box-shadow: 2px 2px 4px 1px rgba(0,0,0,.8); opacity: .5; cursor: pointer; }
#btn-box div:hover { opacity: .8; box-shadow: 2px 2px 4px 1px rgba(0,0,0,.7); }
#btn-box div:active { opacity: .8; box-shadow: 1px 1px 1px 1px rgba(0,0,0,.9); }
#btn-play::before { content: ""; position: absolute; width: 0; height: 0; left: 13px; top: 8px; border: 8px solid transparent; border-left-color: #000; background: #fff; }
#btn-pause { display: none; }
#btn-pause::before { content: ""; position: absolute; width: 2px; height: 10px; left: 10px; top: 10px;border: 0;border-left: 4px solid #000; border-right: 4px solid #000; background: #fff; }
</style>

二、HTML部分（第一行是按钮，第二行是播放器。放在帖子需要按钮的地方，红色部分不能修改，记得给audio一个能用的MP3地址）：

<div id="btn-box"><div id="btn-play"></div><div id="btn-pause"></div></div>
<audio id="ymusic" src="MP3地址" autoplay="autoplay" loop="loop"></audio>

三、JS部分（最好放在帖子HTML代码结束之后）：

<script language="javascript">
var btn = document.getElementById('btn-box');
var mu = document.getElementById('ymusic');
var playbtn = document.getElementById('btn-play');
var pausebtn = document.getElementById('btn-pause');
mu.autoplay ? (playbtn.style.display="none", pausebtn.style.display="block") : (playbtn.style.display="block", pausebtn.style.display="none");
btn.onclick = function(){ iplay(1); }
mu.addEventListener("ended", function(){ iplay(0); })
function iplay(flag){
      if(flag==1){
            mu.paused ? (mu.play(), playbtn.style.display="none", pausebtn.style.display="block") : (mu.pause(), playbtn.style.display="block", pausebtn.style.display="none");
      }else{
            playbtn.style.display = "block";
            pausebtn.style.display = "none";
      }
}
</script>