马黑黑 发表于 2022-1-17 15:47

再试下红影的音乐帖（眼睛的沙漠）

<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://pic.imgdb.cn/item/61e439062ab3f51d91709901.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" >我睡在你眼睛的沙漠里</marquee>
                <p><audio id="music" src="https://www.80wp.com/wj/30567/699e232f0afff874eed24fa822782b70.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 15:47

左移还不够

马黑黑 发表于 2022-1-17 15:51

代码在下面链接 15#：

https://www.huachaowang.com/forum.php?mod=redirect&goto=findpost&ptid=56139&pid=1418955&fromuid=7130

红影 发表于 2022-1-17 16:09

哇，现在按钮有作用了，黑黑真棒{:4_187:}

红影 发表于 2022-1-17 16:09

马黑黑 发表于 2022-1-17 15:51
代码在下面链接 15#：

https://www.huachaowang.com/forum.php?mod=redirect&goto=findpost&ptid=56139& ...

嗯嗯，我去看看是怎么回事{:4_204:}

马黑黑 发表于 2022-1-17 16:13

红影 发表于 2022-1-17 16:09
嗯嗯，我去看看是怎么回事

{:4_190:}

马黑黑 发表于 2022-1-17 16:14

红影 发表于 2022-1-17 16:09
哇，现在按钮有作用了，黑黑真棒

marquee标签已经被废弃，不过浏览器还保留对它的兼容

红影 发表于 2022-1-17 16:41

马黑黑 发表于 2022-1-17 16:14
marquee标签已经被废弃，不过浏览器还保留对它的兼容

我记得你另外介绍过其他的文字走动，用起来的时候就直接用熟悉的了{:4_173:}

加林森 发表于 2022-1-17 17:09

好漂亮的制作。老黑真厉害！{:4_190:}

马黑黑 发表于 2022-1-17 17:33

加林森 发表于 2022-1-17 17:09
好漂亮的制作。老黑真厉害！

这是红影的作品，我只是梳理一下代码

马黑黑 发表于 2022-1-17 17:37

红影 发表于 2022-1-17 16:41
我记得你另外介绍过其他的文字走动，用起来的时候就直接用熟悉的了

marquee是微软的东东，将来浏览器可能会不支持它，所以还是用替代方法好。我再新帖宽幅音画帖通用代码里提供了这个功能，刚做好的

加林森 发表于 2022-1-17 17:47

马黑黑 发表于 2022-1-17 17:33
这是红影的作品，我只是梳理一下代码

我跟到学习。

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

加林森 发表于 2022-1-17 17:47
我跟到学习。

{:4_181:}

加林森 发表于 2022-1-17 18:48

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


老黑，开始喝酒没有？

马黑黑 发表于 2022-1-17 19:24

加林森 发表于 2022-1-17 18:48
老黑，开始喝酒没有？

喝好了，准备喝第二场

小辣椒 发表于 2022-1-17 20:10

可以加滚动字就是可以加歌曲名称了，太好了

加林森 发表于 2022-1-17 20:24

马黑黑 发表于 2022-1-17 19:24
喝好了，准备喝第二场

啊？？？？？？？？？？？？？？还有啊？

马黑黑 发表于 2022-1-17 21:00

加林森 发表于 2022-1-17 20:24
啊？？？？？？？？？？？？？？还有啊？

还有二十分钟

马黑黑 发表于 2022-1-17 21:00

小辣椒 发表于 2022-1-17 20:10
可以加滚动字就是可以加歌曲名称了，太好了

这个不太难

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

马黑黑 发表于 2022-1-17 21:00
还有二十分钟

注意身体啊，别乱喝啊！
页: [1] 2
查看完整版本: 再试下红影的音乐帖（眼睛的沙漠）