江南水乡

咕咚来了

起个网名好难 发表于 2024-10-28 11:48
怎么就方便多了？

看图直观，虽然是小图，但也是个新式样。

起个网名好难

咕咚来了 发表于 2024-10-28 13:10
看图直观，虽然是小图，但也是个新式样。

小图轮流自动切换到中间，也可以点一下小图去切换。

微尘

微尘 发表于 2024-10-27 22:44
老友，晚上好。

点击图片。就可以自动播放的。

筱亭

起个网名好难 发表于 2024-10-28 06:26
谢谢支持欣赏， 早上好！

老师下午好

童声韵灵

起个网名好难 发表于 2024-10-28 12:15
谢谢支持欣赏， 中午好！

晚上好。

咕咚来了

起个网名好难 发表于 2024-10-28 16:19
小图轮流自动切换到中间，也可以点一下小图去切换。

非常新颖。

水墨含香

欣赏了你的作品，真棒。我有个问题想请教一下，你这个作品是怎么发上去的，是使用的代码吗？如果是的话，能不能把这个代码发给我一下，我也想去试验一下，我在论坛里转了半天，也没有找到可用的代码

起个网名好难

水墨含香 发表于 2024-10-29 16:34
欣赏了你的作品，真棒。我有个问题想请教一下，你这个作品是怎么发上去的，是使用的代码吗？如果是的话，能 ...

谢谢支持欣赏，晚上好！

代码附在下面一帖里（不知需不需要审核）

起个网名好难

水墨含香 发表于 2024-10-29 16:34
欣赏了你的作品，真棒。我有个问题想请教一下，你这个作品是怎么发上去的，是使用的代码吗？如果是的话，能 ...

1. <style>
   
2. .lrcShow{font:bold 3em serif;position:absolute;width:80%;height:2em;bottom:5px;left:20%;color:hsl(60,100%,40%);filter:drop-shadow(1px 1px 1px white);letter-spacing:2px;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;cursor:pointer;}.lrcShow::before{position:absolute;content:attr(data-lrc);width:0;height:100%;left:0;top:0;color:transparent;color:darkred;background-image:linear-gra**nt(60deg,hsl(0,100%,50%),hsl(60,100%,50%),hsl(120,100%,50%),hsl(180,100%,50%),hsl(240,100%,90%));-webkit-background-clip:text;overflow:hidden;white-space:nowrap;animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);}@keyframes bgMove1{from{width:0;}to{width:100%;}}@keyframes bgMove0{from{width:0;}to{width:100%;}}
   
3. #oBlk        {
   
4.         width:800px;height:1150px;margin:40px auto;
   
5.         display: grid;background-color:skyblue;
   
6.         place-items:center;position:relative;
   
7.         grid-template-rows:1100px, 80px;
   
8.         grid-template-columns:100%;
   
9.         box-shadow:3px 3px 8px darkgray;
   
10.         overflow:hidden;border-radius:24px;
    
11.         font-size:12px;padding:10px;
    
12. }
    
13. 
    
14. #img_area        {
    
15.         width:100%;height:100%;
    
16.         display: grid;place-items:center;
    
17.         grid-template-rows:repeat(5, 1fr);
    
18.         grid-template-columns:repeat(5, 1fr);
    
19. }
    
20. #img_area img        {overflow:hidden; border-radius:5%;}
    
21. 
    
22. #img_area .roundGrid        {
    
23.         width:144px;height:192px;cursor:pointer;
    
24.         margin-bottom:8px;
    
25. }
    
26. #img_area .roundGrid img{
    
27.         width:100%;
    
28. }
    
29. #img_area .roundGrid span{
    
30.         display:none;
    
31. }
    
32. #img_area .midGrid        {
    
33.         width:450px; height:600px;
    
34.         grid-area: 2 / 2 / span 3 / span 3 ;
    
35. /***************************************
    
36.     grid-column-start: 2;
    
37.         grid-column-end: 5;
    
38.     grid-row-start: 2;
    
39.     grid-row-end: 6;
    
40. ***************************************/
    
41.         display:grid;
    
42.         place-items:center;
    
43. }
    
44. #img_area .midGrid img        {
    
45.         width:100%;
    
46. }
    
47. #lrc_area        {
    
48.     grid-column-start: 1;
    
49.         grid-column-end: 2;
    
50.     grid-row-start: 2;
    
51.     grid-row-end: 3;
    
52.         display: grid;place-items:center;
    
53. }
    
54. .lrcShow{
    
55.         font-size:36px;bottom:0px;font-family:楷体;
    
56. }
    
57. </style>
    
58. <!--
    
59. -->
    
60. <div id="oBlk">
    
61. <div id="img_area"></div>
    
62. <div id="lrc_area"><div class="lrcShow" data-lrc="点击启动播放"></div></div>
    
63. </div>
    
64. 
    
65. 
    
66. <script>
    
67. {
    
68. var lrcPlayerY=function(){return this.init.apply(this,arguments)};lrcPlayerY.prototype={constructor:lrcPlayerY,init:function(opts){lyricTxt=opts.lrcTxt.replace(/(^\s*)|(\s*$)/g,'');this.audioCtrl=document.getElementById(opts.audioCtrl);this.lrcShowObj=document.querySelector('.lrcShow');this.lrcVec=this.handleLrc(lyricTxt);this.genPlayer(opts.audioURL)},handleLrc:function(lyricTxt){var parts=lyricTxt.replace(/(^\s*)|(\s*$)/g,"").split(/\r|\n|\r\n/);var lrcs=new Array();for(let index=0;index<parts.length;index++){let chkTime=parts[index].match(/\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,2}:\d{2}\]/g);if(chkTime){tIdx=parts[index].lastIndexOf(']');if(tIdx>0)lrcTxt=parts[index].substr(tIdx+1);for(m=0;m<chkTime.length;m++){ta=chkTime[m].substr(1).replace(']','').split(/:/);_0=(+ta[0])*60+(+ta[1]);if(lrcs.length==0&&_0!=0){lrcs.push({seconds:0,words:'\u00A9\u0020\u0020\u4e5f\u66fe\u5e74\u8f7b'})}lrcs.push({seconds:_0,words:lrcTxt})}}}return lrcs.sort(function(a,b){return(a.seconds-b.seconds)})},showLrc:function(durTime){this.lrcShowObj.innerHTML=this.lrcShowObj.dataset.lrc=this.lrcVec[this.idx].words;this.lrcShowObj.style.setProperty('--aniName','bgMove'+(this.idx%2));this.lrcShowObj.style.setProperty('--durTime',durTime+'ms');this.lrcShowObj.style.setProperty('--aniPlayState','running');this.idx++},genPlayer:function(mUrl){this.mObj=document.createElement("audio");this.mObj.loop=false;this.mObj.muted=false;this.mObj.autoplay=true;this.mObj.src=mUrl;this.lrcShowObj.appendChild(this.mObj);var that=this;var turn=0;this.idx=0;this.mObj.addEventListener('ended',function(){that.idx=0;this.play()});this.mObj.addEventListener('play',function(){that.lrcShowObj.style.setProperty('--aniPlayState','running')});this.mObj.addEventListener('pause',function(){if(that.idx==1&&this.currentTime<1){that.mObj.play();return false}that.lrcShowObj.style.setProperty('--aniPlayState','paused')});this.mObj.addEventListener('error',function(){console.log("audio wrong, remove play start event");that.lrcShowObj.style.display='none';that.lrcShowObj.removeChild(this)});this.mObj.addEventListener('timeupdate',function(){if(that.idx<that.lrcVec.length){if(this.currentTime>=that.lrcVec[that.idx].seconds){if(that.idx<(that.lrcVec.length-1)){that.showLrc((that.lrcVec[that.idx+1].seconds-that.lrcVec[that.idx].seconds)*950)}else{that.showLrc((this.duration-that.lrcVec[that.idx].seconds)*950)}}}});this.lrcShowObj.addEventListener('click',function(){if(that.mObj.paused){that.mObj.play()}else{that.mObj.pause()}})}}
    
69. 
    
70. let pics = [
    
71. "https://img-volc.jianpian.info/14592807/article/20240110/aac29e3c5cb54697b022cb17d1eb602c__jpg.heic~tplv-flrovnc8r8-s2-cC-q:0:0:0:0:q0.jpg" ,
    
72. "https://img-volc.jianpian.info/14592807/article/20240110/b4c7831cc1c74c66af21c649fa38ac43__jpg.heic~tplv-flrovnc8r8-s2-cC-q:0:0:0:0:q0.jpg" ,
    
73. "https://img-volc.jianpian.info/14592807/article/20240110/5746560bba07428ea951e718d4d7a2be__jpg.heic~tplv-flrovnc8r8-s2-cC-q:0:0:0:0:q0.jpg" ,
    
74. "https://img-volc.jianpian.info/14592807/article/20240110/12ea74da24f84c9696a537be97ee692f__jpg.heic~tplv-flrovnc8r8-s2-cC-q:0:0:0:0:q0.jpg" ,
    
75. "https://img-volc.jianpian.info/14592807/article/20240110/8e394a765fda46c39dfa389557871d7d__jpg.heic~tplv-flrovnc8r8-s2-cC-q:0:0:0:0:q0.jpg" ,
    
76. "https://img-volc.jianpian.info/14592807/article/20240110/38e4103896c34595b25d9b58c37de3d4__jpg.heic~tplv-flrovnc8r8-s2-cC-q:0:0:0:0:q0.jpg" ,
    
77. "https://img-volc.jianpian.info/14592807/article/20240110/f3d91f4bec7947568007ca5340583734__jpg.heic~tplv-flrovnc8r8-s2-cC-q:0:0:0:0:q0.jpg" ,
    
78. "https://img-volc.jianpian.info/14592807/article/20240110/202e6b07553540ce93f653af2a95711b__jpg.heic~tplv-flrovnc8r8-s2-cC-q:0:0:0:0:q0.jpg" ,
    
79. "https://img-volc.jianpian.info/14592807/article/20240110/47c4e713751d4028bdbcdd98e6b9e8bb__jpg.heic~tplv-flrovnc8r8-s2-cC-q:0:0:0:0:q0.jpg" ,
    
80. "https://img-volc.jianpian.info/14592807/article/20240110/df8f412c58234cd1a7154762735183aa__jpg.heic~tplv-flrovnc8r8-s2-cC-q:0:0:0:0:q0.jpg" ,
    
81. "https://img-volc.jianpian.info/14592807/article/20240110/ad017b34949943ecb5f5f2b9c63902b4__jpg.heic~tplv-flrovnc8r8-s2-cC-q:0:0:0:0:q0.jpg" ,
    
82. "https://img-volc.jianpian.info/14592807/article/20240110/1569e158909e4812840c939d29be8db6__jpg.heic~tplv-flrovnc8r8-s2-cC-q:0:0:0:0:q0.jpg" ,
    
83. "https://img-volc.jianpian.info/14592807/article/20240110/acb6898e77ee4730aefc01b4b98aa9d4__jpg.heic~tplv-flrovnc8r8-s2-cC-q:0:0:0:0:q0.jpg" ,
    
84. "https://img-volc.jianpian.info/14592807/article/20240110/715b9bbf3b054b08896b858e7e5bd883__jpg.heic~tplv-flrovnc8r8-s2-cC-q:0:0:0:0:q0.jpg" ,
    
85. "https://img-volc.jianpian.info/14592807/article/20240110/afe52140716346fdbb0d02e0e8d8ab99__jpg.heic~tplv-flrovnc8r8-s2-cC-q:0:0:0:0:q0.jpg" ,
    
86. "https://img-volc.jianpian.info/14592807/article/20240110/46a2c66e30c04547bc18718bdf03a399__jpg.heic~tplv-flrovnc8r8-s2-cC-q:0:0:0:0:q0.jpg"
    
87. ];
    
88. 
    
89. let oBlk = document.querySelector('#img_area');
    
90.         let divObj = document.createElement('div');
    
91.         let imgObj = document.createElement('img');
    
92.        
    
93.         divObj.className = 'midGrid';
    
94.        
    
95.         imgObj.src = pics[0];
    
96.         imgObj.alt = '';
    
97.        
    
98.         divObj.appendChild(imgObj);
    
99.         oBlk.appendChild(divObj);
    
100. let mIdx = 0;
     
101. 
     
102. for(n = 0; n < pics.length; n++)        {
     
103.         let divObj = document.createElement('div');
     
104.         let imgObj = document.createElement('img');
     
105.        
     
106.         divObj.className = 'roundGrid';
     
107.        
     
108.         imgObj.src = pics[n];
     
109.         imgObj.dataset.idx = n;
     
110.         imgObj.alt = '';
     
111.        
     
112.         divObj.appendChild(imgObj);
     
113.         oBlk.appendChild(divObj);
     
114. }
     
115. 
     
116. let divObjs = oBlk.querySelectorAll('.roundGrid');
     
117. 
     
118. for(n = 0; n < divObjs.length; n++)        {
     
119.         divObjs[n].onclick = function(e)        {
     
120.                 oBlk.querySelector('.midGrid img').src = e.target.src;
     
121.                 mIdx = e.target.dataset.idx;
     
122.                 console.log(mIdx);
     
123.         }
     
124. }
     
125. let pic_loop = () => {
     
126.         mIdx++;
     
127.         mIdx >= divObjs.length? mIdx = 0 : mIdx;
     
128.         oBlk.querySelector('.midGrid img').src = divObjs[mIdx].querySelector('img').src;
     
129. }
     
130. setInterval(pic_loop, 10000);
     
131. var lrctxt = `
     
132. [00:00.00] 作词 : 张名河\n[00:01.00] 作曲 : 孟庆云\n[00:07.63]花桥碧水弯\n[00:09.80]江堤柳丝长\n[00:12.76]微风轻吻荷塘\n[00:15.72]醉我江南水乡\n[00:18.55]\n[00:19.35]竹篙轻轻点\n[00:21.42]小船入画廊\n[00:24.32]一曲丝竹小唱\n[00:26.98]\n[00:27.50]醉我江南水乡\n[00:32.22]\n[00:33.22]江南水乡 人间天堂\n[00:38.95]香喷喷的日子\n[00:44.87]粉嘟嘟的船娘\n[00:50.45]\n[00:51.41]仿佛幽梦弥漫唐宋清香\n[00:57.34]染你一身芬芳\n[01:03.23]\n[01:26.68]花桥碧水弯\n[01:28.79]江堤柳丝长\n[01:31.65]微风轻吻荷塘\n[01:34.61]醉我江南水乡\n[01:37.49]\n[01:38.28]竹篙轻轻点\n[01:40.47]小船入画廊\n[01:43.39]一曲丝竹小唱\n[01:46.35]醉我江南水乡\n[01:51.07]\n[01:52.17]江南水乡 人间天堂\n[01:58.01]香喷喷的日子\n[02:03.82]粉嘟嘟的船娘\n[02:09.25]\n[02:10.48]仿佛幽梦弥漫唐宋清香\n[02:16.36]染你一身芬芳\n[02:21.40]\n[02:22.20]花桥碧水弯\n[02:24.36]江堤柳丝长\n[02:27.32]微风轻吻荷塘\n[02:30.21]醉我江南水乡\n[02:33.18]\n[02:33.86]竹篙轻轻点\n[02:36.05]小船入画廊\n[02:38.99]一曲丝竹小唱\n[02:43.99]\n[02:44.93]醉我江南水乡\n[02:47.99]\n[02:49.11]水乡\n[02:52.25]\n[02:53.45]水乡\n`;
     
133. //       
     
134. var opts = {
     
135.     lrcTxt:lrctxt,
     
136.     audioURL:"https://music.163.com/song/media/outer/url?id=455345728.mp3",
     
137. }
     
138. new lrcPlayerY(opts);
     
139. }
     
140. </script>
     

复制代码

王德辰

欣赏了你的音画佳作——江南水乡，赞一个！