马黑黑 发表于 2022-1-19 18:36

队长的试帖修改在这里

本帖最后由 马黑黑 于 2022-1-19 18:39 编辑 <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 18:36

@加林森 队长

马黑黑 发表于 2022-1-19 18:40

<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 18:41

看 HTML 部分的代码，帖子内容包含了按钮在里面，然后定位按钮。定位所用值要依据帖子而定，不好说是多少

加林森 发表于 2022-1-19 19:04

马黑黑 发表于 2022-1-19 18:36
@加林森 队长

来了来了。谢谢老黑帮助。{:4_191:}

风中飞尘 发表于 2022-1-19 19:10

不能播放音乐

风中飞尘 发表于 2022-1-19 19:12

音乐按钮 可以做成那种旋转的播放音乐就旋转音乐停止就自动停止

马黑黑 发表于 2022-1-19 19:55

风中飞尘 发表于 2022-1-19 19:12
音乐按钮 可以做成那种旋转的播放音乐就旋转音乐停止就自动停止

感谢指导！{:4_190:}

红影 发表于 2022-1-19 20:04

黑黑辛苦，跟救火似的到处解决问题{:4_173:}

马黑黑 发表于 2022-1-19 20:35

红影 发表于 2022-1-19 20:04
黑黑辛苦，跟救火似的到处解决问题

也怪我自己没想到定位的问题

红影 发表于 2022-1-19 21:15

马黑黑 发表于 2022-1-19 20:35
也怪我自己没想到定位的问题

怎么能怪你呢，你已经讲得很详细了{:4_187:}

马黑黑 发表于 2022-1-19 22:34

红影 发表于 2022-1-19 21:15
怎么能怪你呢，你已经讲得很详细了

定位很重要

红影 发表于 2022-1-20 12:34

马黑黑 发表于 2022-1-19 22:34
定位很重要

是啊，而且很必须。

马黑黑 发表于 2022-1-20 12:35

红影 发表于 2022-1-20 12:34
是啊，而且很必须。

就像清明上河图一样，哪些人在哪，什么场景在什么地方，都是有讲究的

红影 发表于 2022-1-20 13:30

马黑黑 发表于 2022-1-20 12:35
就像清明上河图一样，哪些人在哪，什么场景在什么地方，都是有讲究的

这个比喻有趣，黑黑还是那么幽默{:4_173:}

马黑黑 发表于 2022-1-20 16:41

红影 发表于 2022-1-20 13:30
这个比喻有趣，黑黑还是那么幽默

一般一般
页: [1]
查看完整版本: 队长的试帖修改在这里