试验帖

愉快

支持试验田。支持练习。

丁香

1. <style>
   
2. #papa {
   
3.         margin: auto;
   
4.         width: 1024px;
   
5.         height: 640px;
   
6.         background: url('https://s21.ax1x.com/2024/03/09/pFsOQxI.jpg ') no-repeat center/cover;
   
7.         box-shadow: 3px 3px 20px #000;
   
8.         overflow: hidden;
   
9.         position: relative;
   
10.         z-index: 1;
    
11. }
    
12. #mypic {
    
13.         position: absolute;
    
14.         width: 100px;
    
15.         margin-top:520px; margin-left:30px;
    
16.         cursor: pointer;
    
17.         animation: rot 6s infinite linear var(--state);
    
18. }
    
19. @keyframes rot { to { transform: rotate(360deg); } }
    
20. </style>
    
21. 
    
22. <div id="papa">
    
23.         <img id="mypic" src="https://bbs.ltxjob.com/data/attachment/forum/202401/21/093312caxmdasrsua274st.png.thumb.jpg" alt="" /><audio id="aud" src="http://music.163.com/song/media/outer/url?id=27937836.mp3" autoplay loop></audio>
    
24. <div  class="lrc" >
    
25.     <ul id="ullrc">
    
26.        </ul>
    
27.             
    
28. </div>
    
29. </div>
    
30. 
    
31. <script>
    
32. let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
33. aud.addEventListener('pause', () => mState());
    
34. aud.addEventListener('playing', () => mState());
    
35. mypic.onclick = () => aud.paused ? aud.play() : aud.pause();
    
36. </script>
    
37. <style type="text/css">
    
38. .lrc{
    
39.     width: 100%;
    
40.     height: 120px;
    
41.     overflow: hidden;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px  0);
    
42.     display: block;position: absolute;top:80%; left:0%;z-index: 5;
    
43.     margin: 0 auto;}
    
44. .lrc #ullrc{
    
45. width: 100%;
    
46. padding: 0;list-style: none;transition: 0.3s all ease;
    
47.     margin: 0;}
    
48. /*歌词普通样式*/
    
49. .lrc #ullrc li{
    
50.     height: 70px;
    
51.     line-height: 60px;
    
52. font-family:华文隶书;
    
53.     font-size: 0px;
    
54.     color: #000078;
    
55.     font-weight: normal;
    
56.     transition: .3s all ease;/*一定要加上不然看着突兀*/
    
57.     list-style-type: none;
    
58.     text-align: center;display: block;
    
59.     width: 100%;
    
60.     margin: 0 auto;}
    
61. /*动态歌词样式*/
    
62. .lrc #ullrc li.active{
    
63.     font-size: 40px;
    
64.     color: #ff0000;
    
65. text-align: center;
    
66. }
    
67. </style>
    
68. <script >
    
69. var lrc = `[00:00.00]雪莲花
    
70. [00:00.970]雪莲花\n[00:05.590]\n[00:07.690]作词:绿柳\n[00:08.870]作曲:许强\n[00:10.720]编曲:胡军\n[00:12.690]\n[00:27.860]你从遥远的天山走来\n[00:34.080]雪山上是你美丽的家\n[00:41.100]你是世上最圣洁的花\n[00:47.970]你把我心也融化\n[00:54.200]\n[00:54.960]冰山上的那朵雪莲花\n[01:01.600]我的世界写满你牵挂\n[01:08.330]随风飘洒四海为家\n[01:15.210]任凭风吹和雪打\n[01:20.820]\n[01:21.800]雪莲花呦雪莲花\n[01:28.990]绚丽多彩一霎那\n[01:35.550]人间聚散几十载\n[01:42.310]花海漂浮叹白发\n[01:48.880]\n[01:49.230]雪莲花呦雪莲花\n[01:56.120]不怕积雪寒冰压\n[02:02.720]飘落红尘走天涯\n[02:09.490]雪山深处把根扎\n[02:15.970]\n[02:18.770]\n[02:43.420]\n[02:43.600]冰山上的那朵雪莲花\n[02:50.320]我的世界写满你牵挂\n[02:57.070]随风飘洒四海为家\n[03:04.090]任凭风吹和雪打\n[03:09.520]\n[03:10.500]雪莲花呦雪莲花\n[03:17.440]绚丽多彩一霎那\n[03:24.470]人间聚散几十载\n[03:31.020]花海漂浮叹白发\n[03:37.420]\n[03:37.870]雪莲花呦雪莲花\n[03:44.820]不怕积雪寒冰压\n[03:51.530]飘落红尘走天涯\n[03:58.470]雪山深处把根扎\n[04:04.660]\n[04:05.370]飘落红尘走天涯\n[04:11.960]雪山深处把根扎\n[04:20.850]\n[04:22.740]\n"},"code":200}
    
71. `;
    
72. function $(id) {return document.getElementById(id);
    
73. }//这样写以后getid方便
    
74. function getLrcArray() {
    
75.     var parts = lrc.split("\n");
    
76.     for (let index = 0; index < parts.length; index++) {
    
77.         parts[index] = getLrcObj(parts[index]);
    
78.     }
    
79.     return parts;
    
80. 
    
81.     function getLrcObj(content) {
    
82. var twoParts = content.split("]");
    
83. var time = twoParts[0].substr(1);
    
84. var timeParts = time.split(":");
    
85. var seconds = +timeParts[1];
    
86.         var min = +timeParts[0];
    
87.         seconds = min * 60 + seconds;
    
88.         var words = twoParts[1];
    
89.         return{
    
90.             seconds: seconds,
    
91.             words: words,
    
92.         };
    
93.     }
    
94. }
    
95. var lrcArray = getLrcArray();
    
96. function inputLrc() {
    
97.     for (let index = 0; index < lrcArray.length; index++) {
    
98.         var li = document.createElement("li");
    
99.         li.innerText = lrcArray[index].words;
    
100.         $("ullrc").appendChild(li);
     
101.     }
     
102. }
     
103. inputLrc();
     
104. function setPosition() {
     
105.     var index = getLrcIndex();
     
106.     if (index == -1) {
     
107.         return;
     
108.     }
     
109.     var lrc_li_height = 70, lrc_ul_height = 60;
     
110.     var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
     
111. if (top < 0) {top = 0;}$("ullrc").style.marginTop = -top + "px";
     
112.     var activeLi = $("ullrc").querySelector(".active");
     
113.     if(activeLi){
     
114.         activeLi.classList.remove("active");}
     
115. $("ullrc").children[index].classList.add("active");
     
116. }
     
117. var turn = 0;
     
118. function getLrcIndex(){
     
119. var time = $("aud").currentTime + turn;for (var index = 0; index < lrcArray.length; index++) {
     
120.         if (lrcArray[index].seconds > time) {
     
121.             return index - 1;
     
122.         }
     
123.     }
     
124. }
     
125. $("aud").ontimeupdate = setPosition;
     
126. </script>
     
127. 
     
128. 
     
129. 
     
130. </td></tr>

复制代码

愉快

月婵 发表于 2024-3-9 11:01 好听的歌好看的画面！

不知能否取出来？

愉快

愉快 发表于 2024-3-20 16:25
支持试验田。支持练习。

这个是纯图片？

月婵

愉快 发表于 2024-5-22 17:16
不知能否取出来？

我不会啊。

愉快

月婵 发表于 2024-5-22 19:35
我不会啊。

把你想要“搬迁”的内容，右键，查看源文件。
但是，是这一个“回复帖子”的全部。需要取出其中的一段，（得记住从哪里开始，到哪里为止。）
现在有丁香公开的记录在第22楼
【】是从这个地方起：【】
<style>
#papa {
        margin: auto;
        width: 1024px;
        height: 640px;
        background: url('https://s21.ax1x.com/2024/03/09/pFsOQxI.jpg ') no-repeat center/cover;
        box-shadow: 3px 3px 20px #000;
               【】......到这个地方止，【】
var turn = 0;
function getLrcIndex(){
var time = $("aud").currentTime + turn;for (var index = 0; index < lrcArray.length; index++) {
        if (lrcArray[index].seconds > time) {
            return index - 1;
        }
    }
}
$("aud").ontimeupdate = setPosition;
</script>



</td></tr>


    【】共两个段落，有130行。【】
于是，在右键打开的全部代码中，去摘取这个130行的代码。
**这个130行代码。
在自己的回复栏选高级选项。选全文本，选附加的全部空格补勾，
黏贴这130行代码
最后点击发送参与回复。

愉快

月婵 发表于 2024-5-22 19:35
我不会啊。

回复中有代码，需要审核 才能放行。

这样子的摸索 研究 试探，练习，失败多次找原因，继续试探和练习，直至成功，也属一种乐趣。
大约是源文件中的544到674，这一段的130行，我是不识外文的，只能如看图说话一个字母一个字母的比照核对，所以学习过程很累。
上午问好婵版版。

丁香

[i=s] 本帖最后由 丁香 于 2024-5-23 19:20 编辑 [/i]

丁香

愉快 发表于 2024-5-22 17:16
不知能否取出来？

这个图片不显示了。需要换一个图片，等我开了电脑再换吧，每个回复都要审核的，很讨厌的。

我那代码下面有“**代码”四个字的，你点一下就可以直接发帖了，不需要看源代码的。

丁香

愉快 发表于 2024-5-22 17:18
这个是纯图片？

这个就是纯图片