半透明效果的无图按钮队长可能需要
半透明效果，大概能适应各种背景色，分三部分，使用时注意代码位置：一、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>
@加林森 队长赶快来看{:4_187:} 红影 发表于 2022-1-19 13:31
@加林森 队长赶快来看
来了来了。 真得感谢老黑了，真是好宝贝我去收藏起来。 加林森 发表于 2022-1-19 13:35
真得感谢老黑了，真是好宝贝我去收藏起来。
我只是把按钮做出来，还没使用过 马黑黑 发表于 2022-1-19 13:36
我只是把按钮做出来，还没使用过
我下午回来就来制作一个。老黑，我去锻炼了哦。拜~~~~~~~~~~~ 加林森 发表于 2022-1-19 13:34
来了来了。
按照这个弄，应该就不会出现白的情况了吧。 flag==1 这个是什么？ 红影 发表于 2022-1-19 14:06
flag==1 这个是什么？
因为有自动播放，所以设置一个索引，以检测开始时按钮的状态 马黑黑 发表于 2022-1-19 14:07
因为有自动播放，所以设置一个索引，以检测开始时按钮的状态
还有这个功能啊，以前完全不知道{:4_204:} 红影 发表于 2022-1-19 14:19
还有这个功能啊，以前完全不知道
JS可以检测audio的一些消息，还能控制，参数很多 红影 发表于 2022-1-19 13:59
按照这个弄，应该就不会出现白的情况了吧。
我现在开始去制作一个出来，看看效果。 马黑黑 发表于 2022-1-19 15:57
JS可以检测audio的一些消息，还能控制，参数很多
又是一个复杂的命令呢。 加林森 发表于 2022-1-19 16:40
我现在开始去制作一个出来，看看效果。
看到了，做的挺好的。 红影 发表于 2022-1-19 20:47
又是一个复杂的命令呢。
我的JS代码有点啰嗦，可以整合一下 红影 发表于 2022-1-19 20:48
看到了，做的挺好的。
嗯嗯，谢谢红影！{:4_204:} 时间到该上来了老黑{:5_117:} 大猫咪 发表于 2022-1-19 22:24
时间到该上来了老黑
到
马黑黑 发表于 2022-1-19 22:30
到
就知道花酒喝完了这时间{:5_117:} 大猫咪 发表于 2022-1-19 22:30
就知道花酒喝完了这时间
早喝完了
页:
[1]
2