端午节安康

执著

起个网名好难

                               
登录/注册后可看大图

小辣椒

问好执著，视频位置还得再调整一下

小辣椒

                               
登录/注册后可看大图

红影

漂亮的节日贺帖。欣赏执著好制作，同祝大家端午安康

执著

起个网名好难 发表于 2024-6-10 07:55

谢谢老师临帖鼓励！我本来想用您“ 憨憨”贴中霓虹歌词显示效果，搞了半天也没有弄好！

执著

小辣椒 发表于 2024-6-10 12:07
问好执著，视频位置还得再调整一下

老师节日快乐！您是不是已经帮我调好了？

起个网名好难

执著 发表于 2024-6-10 22:16
谢谢老师临帖鼓励！我本来想用您“ 憨憨”贴中霓虹歌词显示效果，搞了半天也没有弄好！

歌词显示用个多彩图片就能得到那效果。

执著

红影 发表于 2024-6-10 18:41
漂亮的节日贺帖。欣赏执著好制作，同祝大家端午安康

谢谢影子鼓励！节日问候

执著

起个网名好难 发表于 2024-6-10 22:19
歌词显示用个多彩图片就能得到那效果。

我还不会弄，老师闲时如能帮我将此贴改一下，让我学习一下

起个网名好难

执著 发表于 2024-6-10 22:23
我还不会弄，老师闲时如能帮我将此贴改一下，让我学习一下

因为用了现成得js文件（https://638183.freep.cn/638183/web/api/lrc.js）无法修改它，要想得到那样得效果只好加个不太美观得补丁。

1. <script type="text/javascript">
   
2. let sFile = document.createElement('script');
   
3. sFile.src = 'https://638183.freep.cn/638183/web/api/lrc.js';
   
4. sFile.charset = 'utf-8';
   
5. document.head.appendChild(sFile);
   
6. 
   
7. let geci = [
   
8.         [6.44,"作词：李清照",2.6],
   
9.         [9.03,"作曲：苏越",3.3],
   
10.         [12.32,"制作：Yourfellow",8.0],
    
11.         [20.36,"演唱：云菲菲",10.1],
    
12.         [30.47,"红藕香残 玉簟秋",9.4],
    
13.         [39.86,"轻解罗裳 独上兰舟",8.3],
    
14.         [48.11,"云中谁寄 锦书来",8.2],
    
15.         [56.32,"雁自回时 月满西楼",9.9],
    
16.         [66.18,"花自飘零 水自流",10.9],
    
17.         [77.11,"一种相思 两处闲愁",6.5],
    
18.         [83.59,"此情无计 可消除",10.2],
    
19.         [93.79,"才下眉头 却上心头",6.3],
    
20.         [100.11,"却上心头★★★★★★★★★★★★★★★★★★",35.0],
    
21.         [135.1,"红藕香残 玉簟秋",8.2],
    
22.         [143.3,"轻解罗裳 独上兰舟",8.2],
    
23.         [151.52,"云中谁寄 锦书来",8.3],
    
24.         [159.78,"雁自回时 月满西楼",10.5],
    
25.         [169.87,"花自飘零 水自流",10.7],
    
26.         [180.65,"一种相思 两处闲愁",10.6],
    
27.         [191.25,"此情无计 可消除",5.9],
    
28.         [197.2,"才下眉头 却上心头",7.6],
    
29.         [204.8,"却上心头",6.9],
    
30.         [211.66,"花自飘零 水自流",8.3],
    
31.         [220,"一种相思 两处闲愁",8.3],
    
32.         [228.27,"此情无计 可消除",8.2],
    
33.         [236.47,"才下眉头 却上心头",6.2],
    
34.         [242.68,"却上心头",6]
    
35. ];
    
36. sFile.onload = () => {
    
37. LRC({
    
38.                 papa: '#papa',
    
39.                 lrcAr: geci,
    
40.                 btn: '.cube',
    
41.                 lrc_css: 'left: 50%; transform: translate(-50%); bottom: 10px;',
    
42.         });
    
43. }
    
44. </script>
    
45. <style>
    
46. #lrc::before{color:transparent;background:url('https://img95.699pic.com/xsj/1r/uu/zw.jpg') center/cover;-webkit-background-clip:text;background-clip:text;}
    
47. </style>
    
48. <script>
    
49. (function() {
    
50.     let vids = document.querySelectorAll('.vid');
    
51.     let mState = () => vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
    
52.     aud.onplaying = aud.onpause = () => mState();
    
53.     papa.onclick = () => aud.paused ? aud.play() : aud.pause();
    
54. })();
    
55. 
    
56. </script>

复制代码

起个网名好难

执著 发表于 2024-6-10 22:23
我还不会弄，老师闲时如能帮我将此贴改一下，让我学习一下

44-48行是添加的。

红影

执著 发表于 2024-6-10 22:19
谢谢影子鼓励！节日问候

不客气，端午安康

小辣椒

执著 发表于 2024-6-10 22:18
老师节日快乐！您是不是已经帮我调好了？

我帮你调整了帖子居中，视频的大小和透明度我没有修改的，你可以慢慢自己调整一下，以后就可以玩的

执著

小辣椒 发表于 2024-6-11 15:18
我帮你调整了帖子居中，视频的大小和透明度我没有修改的，你可以慢慢自己调整一下，以后就可以玩的

谢谢辣椒老师，还是我美术鉴赏力太差了，看不出细节问题，希望老师多多指教哈

执著

起个网名好难 发表于 2024-6-10 22:36
44-48行是添加的。

非常感谢老师的修改“补丁”，补丁不美观，显示很美观；但是，我用js源代码进行无补丁修改（将下列红色部分改成老师的：#lrc::before{color:transparent;background:url('https://img95.699pic.com/xsj/1r/uu/zw.jpg') center/cover;-webkit-background-clip:text;background-clip:text;}），却没有变化（不过，在下列红色代码后加上老师的上面代码可以显示）：

(function(lrcShow) {

        let d_config = {
                papa: '#papa',
                btn: '#papa',
                lrcAr: [[2,"ver1.0",3]],
                lrc_css: 'left: 10px; top: 10px;',
                html_code: `<style>
                        #lrc { --motion: cover2; --tt: 1s; --bg: linear-gradient(180deg,hsla(100,10%,50%,.75),hsla(100,100%,20%,.65)); position: absolute; font: bold 2.4em sans-serif; color: hsl(100, 100%, 90%); white-space: pre; -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0, 100%, 0%, .85)); z-index: 900; }
                        #lrc::before { position: absolute; content: attr(data-lrc); width: 0%; height: 100%; color: transparent; overflow: hidden; white-space: pre; background: var(--bg); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards var(--state); }
                        @keyframes cover1 { from { width: 0%; }  to { width: 100%; } }
                        @keyframes cover2 { from { width: 0%; }  to { width: 100%; } }
                </style>
                <div id="lrc" data-lrc="HUACHAO LRC">HUACHAO LRC</div>`,
        };

        let execLrc = (u_config) => {
                let data = Object.assign({}, d_config, u_config);
                let pabox = document.querySelector(data.papa);
                pabox.innerHTML += data.html_code;
                let        btns = document.querySelectorAll(data.btn);
                lrc.style.cssText += data.lrc_css;
                let vids = document.querySelectorAll('video');
                let elms = [pabox,lrc];
                let mKey = 0, mFlag = true;
                let stateSetting = (elms,state,val) => elms.forEach(elm => elm.style.setProperty(state,val));
                let vidplay = (vids,idx) => {
                        if(vids.length < 1) return;
                        [...vids].forEach(vid => {
                                idx ? vid.play() : vid.pause();
                        });
                };
                let showLrc = (time) => { let name = mFlag ? 'cover1' : 'cover2'; lrc.innerHTML = data.lrcAr[mKey][1]; lrc.dataset.lrc = data.lrcAr[mKey][1].replace(/<br>/, '\n'); lrc.style.setProperty('--motion', name); lrc.style.setProperty('--tt', time + 's'); lrc.style.setProperty('--state', 'running'); mKey += 1; mFlag = !mFlag; };
                let calcKey = () => { for (j = 0; j < data.lrcAr.length; j++) { if (aud.currentTime <= data.lrcAr[j][0]) { mKey = j - 1; break; } } if (mKey < 0) mKey = 0; if (mKey > data.lrcAr.length - 1) mKey = data.lrcAr.length - 1; let time = data.lrcAr[mKey][2] - (aud.currentTime - data.lrcAr[mKey][0]); showLrc(time); };
                let mState = () => {
                        aud.paused ? (stateSetting(elms,'--state','paused'),vidplay(vids,0)) : (stateSetting(elms,'--state','running'),vidplay(vids,1));
                };
                [...btns].forEach(btn => {
                        btn.onclick = () => aud.paused ? aud.play() : aud.pause();
                });
                aud.addEventListener('pause', () => mState());
                aud.addEventListener('playing', () => mState());
                aud.addEventListener('seeked', () => calcKey());
                aud.addEventListener('timeupdate', () => {
                        for (let j = 0; j < data.lrcAr.length; j++) {
                                if (aud.currentTime >= data.lrcAr[j][0]) {
                                        if (mKey === j) showLrc(data.lrcAr[j][2]);
                                        else continue;
                                }
                        }
                });
        };

        lrcShow.LRC = execLrc;

})(this);

起个网名好难

执著 发表于 2024-6-11 22:18
非常感谢老师的修改“补丁”，补丁不美观，显示很美观；但是，我用js源代码进行无补丁修改（将 ...

不太明白你的意思，如果直接修改js的源代码只需把 background: var(--bg); 改成 background:url('https://img95.699pic.com/xsj/1r/uu/zw.jpg') center/cover;就行了。
改了js源代码帖子代码就不需要改了。

执著

起个网名好难 发表于 2024-6-11 22:59
不太明白你的意思，如果直接修改js的源代码只需把  background: var(--bg); 改成 background:url('https: ...

谢谢老师不厌其烦地指教！可以依老师的样画葫芦了。