红影创意的代码实现（测试）

马黑黑 · 发表于 2022-1-19 14:08

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

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

x

本帖最后由马黑黑于 2022-1-19 15:02 编辑

马黑黑 · 发表于 2022-1-19 14:08

按钮不要图片的，不协调

马黑黑 · 发表于 2022-1-19 14:09

本帖最后由马黑黑于 2022-1-19 14:50 编辑

帖子代码（提供少量说明）：

<style type="text/css">
.m-box { /* 主窗体 */
margin: 0 auto;
position: relative;
width: 700px;
height: 467px;
background: transparent url('https://pic.imgdb.cn/item/61e673e62ab3f51d91ff8618.jpg') no-repeat;
}
/* 主窗体图片共性 */
.m-box img { position: absolute; left:0; top:0; cursor:pointer; }
#fly { display: block; } /* 飞翔 */
#drop { display: none; } /* 落下 */
/* 以下是播放暂停按钮 */
#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 class="m-box">
<img id="fly" src="https://pic.imgdb.cn/item/61e678a22ab3f51d9104f95d.gif" alt="" />
<img id="drop" src="https://pic.imgdb.cn/item/61e78ce72ab3f51d91d68242.jpg" alt="" />
<div id="btn-box" style="top:400px; left:600px;"><div id="btn-play"></div><div id="btn-pause"></div></div>
</div>
<audio id="ymusic" src="https://www.80wp.com/wj/107164/798b655ee49c826ebdce587061063622.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
var btn = document.getElementById('btn-box');
var mu = document.getElementById('ymusic');
var playbtn = document.getElementById('btn-play');
var pausebtn = document.getElementById('btn-pause');
var d = document.getElementById('fly');
var f = document.getElementById('drop');
d.onclick = function(){ d.style.display="none"; f.style.display="block"; iplay(1); }
f.onclick = function(){ d.style.display="block"; f.style.display="none"; iplay(1); }
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); d.style.display="none"; f.style.display="block"; })
function iplay(flag){
if(flag==1){
mu.paused ? (mu.play(), playbtn.style.display="none", pausebtn.style.display="block", d.style.display="block", f.style.display="none") : (mu.pause(), playbtn.style.display="block", pausebtn.style.display="none", d.style.display="none", f.style.display="block");
}else{ playbtn.style.display = "block"; pausebtn.style.display = "none"; }
}
</script>