加林森 发表于 2022-1-17 21:55

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

<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;">
                <marqueescrollamount="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

好有年代感哟！队长真棒！{:4_187:}

加林森 发表于 2022-1-17 21:57

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

谢谢小九！{:4_190:}

红影 发表于 2022-1-17 22:06

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

红影 发表于 2022-1-17 22:07

队长这个是新学的按钮呢，很赞{:4_187:}

小辣椒 发表于 2022-1-17 22:08

队长最勤奋{:4_178:}

加林森 发表于 2022-1-18 09:45

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

现在改过来了。谢谢提醒。{:4_190:}

加林森 发表于 2022-1-18 09:46

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

现学现用，活学活用。{:4_189:}

加林森 发表于 2022-1-18 09:47

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

谢谢小辣椒支持！{:4_190:}

红影 发表于 2022-1-18 14:32

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

是啊，这个学习成果很不错{:4_204:}

加林森 发表于 2022-1-18 16:53

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

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

大猫咪 发表于 2022-1-18 19:40

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

{:4_204:}{:4_190:}

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

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

谢谢猫猫。{:4_187:}{:4_190:}

大猫咪 发表于 2022-1-18 19:56

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

和队长一起想小芳{:4_187:} {:5_117:}

绿叶清舟 发表于 2022-1-18 20:15

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

加林森 发表于 2022-1-18 20:18

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

哈哈哈哈，好的好的。{:4_190:}

加林森 发表于 2022-1-18 20:18

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

清舟晚上好！跟老黑学习的啊。{:4_187:}

绿叶清舟 发表于 2022-1-18 20:19

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

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

加林森 发表于 2022-1-18 20:20

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

不急的啊，慢慢学习有好处的。{:4_190:}

红影 发表于 2022-1-18 22:24

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

还可以用来完成作业，一举两得{:4_173:}
页: [1] 2
查看完整版本: 【流年-色彩】《小芳》 李春波 送大家！