|
|
好,
<style type="text/css">
.picBtn {
width: 100px;
height: 100px;
border: none;
outline: none;
border-radius: 8px;
background: transparent url('http://image.hnol.net/c/2022-02/24/15/202202241559481151-5087368.gif') no-repeat;
cursor: pointer;
</style>
<div style="position: relative; left:20px; width:1024px;text-align:center;">
<img alt="" src="http://image.hnol.net/c/2022-02/24/00/20220224002919411-5087368.gif" style="box-shadow:1px 1px 2px #666; border:solid 1px #000;" />
<div style="position:absolute; width:150px; left:670px; top: 270px; text-align:center;">
<center >
<p ><font color="#ffffff" size="4" >
<div style="color:#ffffff;margin:0px;padding:10px;font-size:5px;font-family:微软雅黑;text-shadow:1px 1px 2px #ffffff;">
<marquee scrollamount="4" direction="left" >好久没有玩了 今天套用一个代码玩玩 谢谢马黑黑老师 谢谢小冤家小辣椒</marquee>
<p><audio id="music" src="https://oss.shandianpan.com/d598d097cf938786f5980586831edaee.mp3" loop="loop" autoplay="autoplay" ></audio><br> </p>
<button id="picBtn" class="picBtn"></button>
</div>
</div>
</div>
<script language="javascript">
var mu = document.getElementById('music');
var btn = document.getElementById('picBtn');
btn.onclick = function(){
mu.paused ? (mu.play(), btn.style.background="url('http://image.hnol.net/c/2022-02/24/15/202202241559481151-5087368.gif')") : (mu.pause(), btn.style.background="url('http://image.hnol.net/c/2022-02/24/16/20220224160408591-5087368.gif')");
}
mu.addEventListener("ended", function(){
btn.style.background="url('http://image.hnol.net/c/2022-02/24/16/20220224160408591-5087368.gif')";
})
</script> |
|