庆庆 ：空心

马黑黑

执著 发表于 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 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 = [ [1.71,"空心",2.7], [6,"……",3], [266.02,"把我当成一棵树吧",5.2] ];
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 21:05
老师晚上好！我修改了之后，按钮图片点击没有任何反应，也不转动。不知道问题出在哪里？
修改内容如下： ...

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

1. <style>
   
2. #papa {
   
3.     margin: 0 0 0 calc(50% - 593px);
   
4.     width: 1024px;
   
5.     height: 640px;
   
6.     background: url('https://638183.freep.cn/638183/t24/1/19u.jpeg') no-repeat center/cover;
   
7.     box-shadow: 3px 3px 20px #000;
   
8.     position: relative;
   
9.     display: grid;
   
10.     place-items: center;
    
11.     z-index: 1;
    
12. }
    
13. #lrc {
    
14.     position: absolute;
    
15.     top: 10px;
    
16.     font: bold 2.4em sans-serif;
    
17.     color: lightgreen;
    
18.     text-shadow: 1px 1px 1px rgba(0,0,0,.45);
    
19.     --ani: lrcGo1;
    
20.     --duration: 1s;
    
21. }
    
22. #lrc::before {
    
23.     position: absolute;
    
24.     content: attr(data-lrc);
    
25.     width: 100%;
    
26.     height: 100%;
    
27.     color: transparent;
    
28.     background: repeating-radial-gradient(lightgreen, red, lightgreen 24px);
    
29.     background-clip: text;
    
30.     -webkit-background-clip: text;
    
31.     clip-path: inset(0 100% 0 0);
    
32.     animation: var(--ani) var(--duration) linear forwards var(--state);
    
33.   
    
34. }
    
35. #btnplay {
    
36.     position: absolute;
    
37.     bottom: 10px;
    
38.     width: 50px;
    
39.     height: 50px;
    
40.     animation: rotating 6s linear infinite var(--state);
    
41.     cursor: pointer;
    
42. }
    
43. @keyframes rotating { to { transform: rotate(360deg); } }
    
44. @keyframes lrcGo0 { to { clip-path: inset(0 0 0 0); } }
    
45. @keyframes lrcGo1 { to { clip-path: inset(0 0 0 0); } }
    
46. </style>
    
47. 
    
48. <div id="papa">
    
49.     <audio src="https://music.163.com/song/media/outer/url?id=496815031 " autoplay loop></audio>
    
50.     <div id="lrc" data-lrc="HUACHAO LRC">HUACHAO LRC</div>
    
51.     <img id="btnplay" src=" https://638183.freep.cn/638183/t23/btn/y5j.png " alt="" />
    
52. </div>
    
53. 
    
54. <script>
    
55. var geci = [ [1.71,"空心",2.7], [6,"……",3], [266.02,"把我当成一棵树吧",5.2] ];
    
56. var sF = document.createElement('script');
    
57. sF.charset = 'utf-8';
    
58. sF.src = 'https://638183.freep.cn/638183/web/js/btnlrc.js';
    
59. document.querySelector('body').appendChild(sF);
    
60. </script>

复制代码

执著

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

但是，按钮图片还是不动

执著

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

执著

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

马黑黑

执著 发表于 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 09:07
你“明白了”后面的代码，img 和 id 之间要有个空格，src前也需要一个空格。代码中，两个表述单位之间用 ...

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

马黑黑

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

有志者事竟成

执著

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

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

马黑黑

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

开心就好

执著

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

<style>
#papa {

执著

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

                               
登录/注册后可看大图

" 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>

执著

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

                               
登录/注册后可看大图

" alt="" />

执著

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

马黑黑

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

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