论坛 › 音乐沙龙 › 庆庆 ：空心

马黑黑 发表于 2024-3-7 18:05

执著 发表于 2024-3-7 17:30
老师，如何要更换帖子中播放器叶子，用自己的图片可以吗？如何操作？谢谢！

CSS代码中，#btnplay 选择器和 ye-zi 选择器是构造播放器的设定，如果你想换成其他的，比如只要一张图片，那么，ye-zi 选择器全部删掉，#btnplay 花括号里的内容删掉不需要的（保留定位和大小尺寸）。

HTML代码中，把 <div id="btnplay"></div> 改为图片代码。

JS代码中，以下内容都不要：

//按钮叶瓣 : 9
Array.from({length: all = 9}).forEach((item,key) => {
    item = document.createElement('ye-zi');
    item.style.cssText += `--ww: 30px; --deg: ${360 / all * key}deg;`;
    btnplay.prepend(item);
});

执著 发表于 2024-3-7 18:38

非常感谢老师指教，我吃了饭再来尝试

马黑黑 发表于 2024-3-7 19:32

执著 发表于 2024-3-7 18:38
非常感谢老师指教，我吃了饭再来尝试

嗯，吃了饭灵感就来了

执著 发表于 2024-3-7 21:05

本帖最后由 执著 于 2024-3-7 21:10 编辑

马黑黑 发表于 2024-3-7 18:05
CSS代码中，#btnplay 选择器和 ye-zi 选择器是构造播放器的设定，如果你想换成其他的，比如只要一张图片 ...
老师晚上好！我修改了之后，按钮图片点击没有任何反应，也不转动。不知道问题出在哪里？
修改内容如下：
1、删除了css代码中的 ye-zi 部分；
2、#btnplay 部分修改为（宽、高度数字修改不修改位置没有任何变化）：
   #btnplay {
    position: absolute;
width: 50px;
height: 50px;
animation: rotating 6s linear infinite var(--state);
cursor: pointer;
}

3、删除了JS代码中 //按钮叶瓣 : 9。。。。。。btnplay.prepend(item);
});

4、Html代码中<div id="btnplay"></div>修改为：

<div><img src=" https://638183.freep.cn/638183/t23/btn/y5j.png " alt="" /></div>





全代码如下：

<style>
#papa {
    margin: 0 0 0 calc(50% - 593px);
    width: 1024px;
    height: 640px;
    background: url('https://638183.freep.cn/638183/t24/1/19u.jpeg') no-repeat center/cover;
    box-shadow: 3px 3px 20px #000;
    position: relative;
    display: grid;
    place-items: center;
    z-index: 1;
}
#lrc {
    position: absolute;
    top: 10px;
    font: bold 2.4em sans-serif;
    color: lightgreen;
    text-shadow: 1px 1px 1px rgba(0,0,0,.45);
    --ani: lrcGo1;
    --duration: 1s;
}
#lrc::before {
    position: absolute;
    content: attr(data-lrc);
    width: 100%;
    height: 100%;
    color: transparent;
    background: repeating-radial-gradient(lightgreen, red, lightgreen 24px);
    background-clip: text;
    -webkit-background-clip: text;
    clip-path: inset(0 100% 0 0);
    animation: var(--ani) var(--duration) linear forwards var(--state);

}
#btnplay {
    position: absolute;
    bottom: 10px;
    width: 50px;
    height: 50px;
    animation: rotating 6s linear infinite var(--state);
    cursor: pointer;
}

}

@keyframes rotating { to { transform: rotate(360deg); } }
@keyframes lrcGo0 { to { clip-path: inset(0 0 0 0); } }
@keyframes lrcGo1 { to { clip-path: inset(0 0 0 0); } }
</style>
<div id="papa">
    <audio src="https://music.163.com/song/media/outer/url?id=496815031 " autoplay loop></audio>
    <div id="lrc" data-lrc="HUACHAO LRC">HUACHAO LRC</div>
    <div><img src=" https://638183.freep.cn/638183/t23/btn/y5j.png " alt="" /></div>
<script>
var geci = [ , , ];
var sF = document.createElement('script');
sF.charset = 'utf-8';
sF.src = 'https://638183.freep.cn/638183/web/js/btnlrc.js';
document.querySelector('body').appendChild(sF);

</script>

马黑黑 发表于 2024-3-7 23:10

执著 发表于 2024-3-7 21:05
老师晚上好！我修改了之后，按钮图片点击没有任何反应，也不转动。不知道问题出在哪里？
修改内容如下： ...

代码有些问题，严重的问题是 图片按钮没有id，下面是修改后的代码，仔细瞧下：

<style>
#papa {
    margin: 0 0 0 calc(50% - 593px);
    width: 1024px;
    height: 640px;
    background: url('https://638183.freep.cn/638183/t24/1/19u.jpeg') no-repeat center/cover;
    box-shadow: 3px 3px 20px #000;
    position: relative;
    display: grid;
    place-items: center;
    z-index: 1;
}
#lrc {
    position: absolute;
    top: 10px;
    font: bold 2.4em sans-serif;
    color: lightgreen;
    text-shadow: 1px 1px 1px rgba(0,0,0,.45);
    --ani: lrcGo1;
    --duration: 1s;
}
#lrc::before {
    position: absolute;
    content: attr(data-lrc);
    width: 100%;
    height: 100%;
    color: transparent;
    background: repeating-radial-gradient(lightgreen, red, lightgreen 24px);
    background-clip: text;
    -webkit-background-clip: text;
    clip-path: inset(0 100% 0 0);
    animation: var(--ani) var(--duration) linear forwards var(--state);

}
#btnplay {
    position: absolute;
    bottom: 10px;
    width: 50px;
    height: 50px;
    animation: rotating 6s linear infinite var(--state);
    cursor: pointer;
}
@keyframes rotating { to { transform: rotate(360deg); } }
@keyframes lrcGo0 { to { clip-path: inset(0 0 0 0); } }
@keyframes lrcGo1 { to { clip-path: inset(0 0 0 0); } }
</style>

<div id="papa">
    <audio src="https://music.163.com/song/media/outer/url?id=496815031 " autoplay loop></audio>
    <div id="lrc" data-lrc="HUACHAO LRC">HUACHAO LRC</div>
    <img id="btnplay" src=" https://638183.freep.cn/638183/t23/btn/y5j.png " alt="" />
</div>

<script>
var geci = [ , , ];
var sF = document.createElement('script');
sF.charset = 'utf-8';
sF.src = 'https://638183.freep.cn/638183/web/js/btnlrc.js';
document.querySelector('body').appendChild(sF);
</script>

执著 发表于 2024-3-7 23:57

我正准备来修改回帖了，我将原来的改成了：<img id="btnplay" src="https://638183.freep.cn/638183/t23/btn/y5j.png" alt="" />

但是，按钮图片还是不动

执著 发表于 2024-3-8 00:02

明白了，<imgid="btnplay"src="https://638183.freep.cn/638183/t23/btn/y5j.png" alt=""/>后面掉了一个</div>
太感谢老师了，辛苦了！

执著 发表于 2024-3-8 00:05

今晚可以睡个好觉了，老师晚安！

马黑黑 发表于 2024-3-8 09:07

本帖最后由 马黑黑 于 2024-3-8 09:10 编辑

执著 发表于 2024-3-8 00:02
明白了，后面掉了一个
太感谢老师了，辛苦了！
你“明白了”后面的代码，img 和 id 之间要有个空格，src前也需要一个空格。代码中，两个表述单位之间用空格隔开。试看：

<img id="btnplay" src="图片地址" alt="" />

上一行HTML代码是图片标签代码，它是一个自闭合标签，写成 <代码 /> ， /> 的前面需要一个空格。其他各个表述单位，img 是标签名，id="btnplay"是 img 标签的身份标识（即id），src="图片地址" 是标签的 src 属性（给出图片的URI地址），alt="" 是 img 标签的一个必须属性，用于处理图像不能显示时给出一个文本说明（我们不想说明所以什么也不给但alt属性必须有），这些，都是各自的表述单位，两个表述单位之间，必须用一个空格隔开，否则，浏览器很大可能性读不懂你的代码，你做的东西就无法帮你按预期显示出来。

另外，你原来的代码中，img 标签两头用 div 标签包裹起来，这是否需要视情况而定。这个帖子，图片应当是帖子容器下的第一代子元素，你把它放到另一个div里，它就是帖子父元素的孙子了，有可能不好直接控制它（比如定位）。

执著 发表于 2024-3-8 18:29

马黑黑 发表于 2024-3-8 09:07
你“明白了”后面的代码，img 和 id 之间要有个空格，src前也需要一个空格。代码中，两个表述单位之间用 ...

老师好细心！太感谢你了。我敢肯定你站上讲台一定是一个非常受欢迎的好老师！
我有很多东西不懂，所以，只能试探性在代码编辑器中不断地尝试！

马黑黑 发表于 2024-3-8 19:23

执著 发表于 2024-3-8 18:29
老师好细心！太感谢你了。我敢肯定你站上讲台一定是一个非常受欢迎的好老师！
我有很多东西不懂，所以， ...

有志者事竟成

执著 发表于 2024-3-8 21:22

马黑黑 发表于 2024-3-8 19:23
有志者事竟成

谢谢老师鼓励！我会努力的，学到了活到老哈

马黑黑 发表于 2024-3-8 21:46

执著 发表于 2024-3-8 21:22
谢谢老师鼓励！我会努力的，学到了活到老哈

开心就好

执著 发表于 2024-3-8 22:31

老师，我刚才在想：能否将上面的btnplay单独使用？我试着放在下列代码中，但是播放按钮是静止的，虽然可以点击播放和暂停。不知道是不是我哪里又出了问题！

<style>
#papa {

执著 发表于 2024-3-8 22:33

本帖最后由 执著 于 2024-3-8 22:36 编辑

<style>
#papa {
      margin: auto;
      width: 800px;
      height: 640px;
      background: url('https://pic.imgdb.cn/item/65eacae39f345e8d03ca5574.png') no-repeat center/cover;
      box-shadow: 3px 3px 20px #000;
      overflow: hidden;
      position: relative;
      z-index: 1;
#btnplay {
    position: absolute;   
    bottom: 50px;
right: 380px;
width: 50px;
    height: 50px;
    animation: rotating 6s linear infinite var(--state);
    cursor: pointer;
}
@keyframes rotating { to { transform: rotate(360deg); } }


</style>

<div id="papa">
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=5263475.mp3
" autoplay loop></audio>
<img id="btnplay" src=" https://638183.freep.cn/638183/t23/btn/y5j.png " alt="" />
<p align="center"><MARQUEE style="WIDTH: 379px" scrollAmount=7 DIV><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 45pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=隶书 color=#ffff00>祝女士们节日快乐</FONT></MARQUEE>
</p>

</div>
<script>
var sF = document.createElement('script');
sF.charset = 'utf-8';
sF.src = 'https://638183.freep.cn/638183/web/js/btnlrc.js';
document.querySelector('body').appendChild(sF);
</script>

执著 发表于 2024-3-8 22:38

怎么上面按钮地址，直接就变成图片了？

https://638183.freep.cn/638183/t23/btn/y5j.png " alt="" />

执著 发表于 2024-3-8 22:40

不应该添加alt=""吧！ 我上面的回复不能修改

马黑黑 发表于 2024-3-8 23:11

执著 发表于 2024-3-8 22:40
不应该添加alt=""吧！ 我上面的回复不能修改

这与 alt 属性无关。这是你发代码的方式，地址被论坛的ubb模式解析了，弄成了图片。

查看完整版本: 庆庆 ：空心