【流年-色彩】《小芳》 李春波 送大家！

加林森

<style type="text/css">
.picBtn {
        width: 32px;
        height: 32px;
        border: none;
        border-radius: 8px;
        background: transparent url('https://pic.imgdb.cn/item/61e430692ab3f51d916a100c.png') no-repeat;
        cursor: pointer;
        outline: none;
        box-shadow: 1px 1px 2px 1px rgba(0,0,0,.25);
}

.picBtn:hover {
        opacity: 0.95;
        box-shadow: 1px 1px 2px 2px rgba(0,0,255,.3);
}

#picBtn:active {
        opacity: 0.8;
        box-shadow: 0px 1px 1px 1px rgba(0,0,255,.5);
}

</style>

<div style="position: relative; left:-200px; width:1026px;text-align:center;">
        <img alt="" src="https://www.80wp.com/wj/3015585/0d2abe4a3acb398a2ccc7d0e77aded24.jpg" style="box-shadow:1px 1px 2px #666; border:solid 1px #000;" />
        <div style="position:absolute; width:200px; left:100px; top: 420px; text-align:center;">
                <marquee  scrollamount="2" direction="left" >[小芳]-_李春波 DJ慢摇嗨曲</marquee>
                <p><audio id="music" src="https://www.80wp.com/wj/3015573/263f141389bf359e85f04cbd9c9e2a84.mp3" loop="loop" autoplay="autoplay" ></audio><br> </p>
                <button id="picBtn" class="picBtn"></button>
        </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('https://pic.imgdb.cn/item/61e430692ab3f51d916a100c.png')") : (mu.pause(), btn.style.background="url('https://pic.imgdb.cn/item/61e4301b2ab3f51d9169d5eb.png')");
}

mu.addEventListener("ended", function(){
        btn.style.background="url('https://pic.imgdb.cn/item/61e4301b2ab3f51d9169d5eb.png')";
})

</script>

小九

好有年代感哟！  队长真棒！

加林森

小九 发表于 2022-1-17 21:55
好有年代感哟！  队长真棒！

谢谢小九！

红影

队长，你路标标题不对，二轮标题应该用【流年-色彩】小芳

红影

队长这个是新学的按钮呢，很赞

小辣椒

队长最勤奋

加林森

红影 发表于 2022-1-17 22:06
队长，你路标标题不对，二轮标题应该用【流年-色彩】小芳

现在改过来了。谢谢提醒。

加林森

红影 发表于 2022-1-17 22:07
队长这个是新学的按钮呢，很赞

现学现用，活学活用。

加林森

小辣椒 发表于 2022-1-17 22:08
队长最勤奋

谢谢小辣椒支持！

红影

加林森 发表于 2022-1-18 09:46
现学现用，活学活用。

是啊，这个学习成果很不错

加林森

红影 发表于 2022-1-18 14:32
是啊，这个学习成果很不错

是的是的。我感到好开心的。

大猫咪

老歌经典，百听不厌，队长好制作，真棒！

加林森

大猫咪 发表于 2022-1-18 19:40
老歌经典，百听不厌，队长好制作，真棒！

谢谢猫猫。

大猫咪

加林森 发表于 2022-1-18 19:55
谢谢猫猫。

和队长一起想小芳  

绿叶清舟

队长厉害啊，这个播放器漂亮 的

加林森

大猫咪 发表于 2022-1-18 19:56
和队长一起想小芳

哈哈哈哈，好的好的。

加林森

绿叶清舟 发表于 2022-1-18 20:15
队长厉害啊，这个播放器漂亮 的

清舟晚上好！跟老黑学习的啊。

绿叶清舟

加林森 发表于 2022-1-18 20:18
清舟晚上好！跟老黑学习的啊。

学得真快啊，俺都没消化了

加林森

绿叶清舟 发表于 2022-1-18 20:19
学得真快啊，俺都没消化了

不急的啊，慢慢学习有好处的。

红影

加林森 发表于 2022-1-18 16:53
是的是的。我感到好开心的。

还可以用来完成作业，一举两得