《天使的翅膀》徐誉滕 (半透明效果的无图按钮队长可能需要) TO:马黑黑
本帖最后由 加林森 于 2022-1-19 19:08 编辑 <br /><br /><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>
<div style="position:relative; text-align:center; left: -200px;">
<div id="btn-box"style="left:125px; top:540px;"><div id="btn-play"></div><div id="btn-pause"></div></div>
<img src="https://pic.imgdb.cn/item/61e7da112ab3f51d912a2afd.jpg" alt="" />
<audio id="ymusic" src="https://www.80wp.com/wj/107164/798b655ee49c826ebdce587061063622.mp3" autoplay="autoplay" loop="loop"></audio>
</div>
<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> @马黑黑 怎么播放器又跑出去了啊？是哪里出问题了？有点晕。 加林森 发表于 2022-1-19 17:33
怎么播放器又跑出去了啊？是哪里出问题了？有点晕。
你对定位理解的不够清晰。我去看看源码 马黑黑 发表于 2022-1-19 17:57
你对定位理解的不够清晰。我去看看源码
好的好的 加林森 发表于 2022-1-19 17:28
@马黑黑
我的按钮没有做定位，使用的时候根据自己帖子的情况去做定位，你要做的改变有两个方法，用任意一个，移动位置自己定：
#btn-box { position: relative; left:-0px; top: -60px; ... }
第二种：
<div id="btn-box" style="left:-0px; top: -60px;"> ...
另外，你的代码肯定有错，有两个 <div id="btn-box"> 马黑黑 发表于 2022-1-19 18:04
我的按钮没有做定位，使用的时候根据自己帖子的情况去做定位，你要做的改变有两个方法，用任意一个，移动 ...
就是，我也发现了。我马上去修改。 加林森 发表于 2022-1-19 18:07
就是，我也发现了。我马上去修改。
嗯嗯，不急哈，慢慢领会 马黑黑 发表于 2022-1-19 18:04
我的按钮没有做定位，使用的时候根据自己帖子的情况去做定位，你要做的改变有两个方法，用任意一个，移动 ...
现在修改好了，你再看看去。 马黑黑 发表于 2022-1-19 18:11
嗯嗯，不急哈，慢慢领会
嗯嗯，谢谢老黑。我去吃面条去了，等会再来。 加林森 发表于 2022-1-19 18:11
现在修改好了，你再看看去。
好像按钮不见了 马黑黑 发表于 2022-1-19 18:14
好像按钮不见了
就是，我也在找。 一直喜欢的歌，百听不厌，队长好分享！ 老黑收礼开心！
{:4_204:}{:4_190:} 大猫咪 发表于 2022-1-19 19:35
一直喜欢的歌，百听不厌，队长好分享！ 老黑收礼开心！
谢谢猫猫支持！{:4_190:}{:4_204:} 加林森 发表于 2022-1-19 19:44
谢谢猫猫支持！
和队长一起欣赏经典 {:4_179:}温暖{:4_190:} 大猫咪 发表于 2022-1-19 19:46
和队长一起欣赏经典 温暖
嗯嗯，好的好的。{:4_190:}{:4_179:} 发现队长总是喜欢跟在我后面用音乐，几次都是这样{:4_173:} 红影 发表于 2022-1-19 19:58
发现队长总是喜欢跟在我后面用音乐，几次都是这样
向你学习啊。{:4_189:} 加林森 发表于 2022-1-19 20:33
向你学习啊。
我也是看着那个动图，才想起来这首歌的{:4_173:} 红影 发表于 2022-1-19 21:14
我也是看着那个动图，才想起来这首歌的
嗯嗯，明白的。{:4_204:}
页:
[1]
2