霜染枫丹 发表于 2026-9-12 17:47

老家的月季花 学习馬老师教程文本高亮游移效果


<style>
    @import 'https://638183.freep.cn/638183/web/tz/tz.v4.css';
   
    .pa {
      --offsetX: 80px;
      --bg: url('https://ff.xiaoqiaodali.top:5401/i/2026/09/09/6aa17199efdbb.gif') no-repeat center/cover;
      --ma-size: 6%;
      width: 1300px;
      height: 731px;
      position: relative;
      overflow: hidden;
    }
    .pa *, .pa *::before, .pa *::after {
      content: none !important;
    }
   
    /* 【修复全屏问题】改用 bottom 定位，永远贴在底部 */
    #custom-lrc-container {
      position: absolute;
      bottom: 15px;      /* 关键：距离底部 50px，全屏不变，可修改 */
      left: 0;
      width: 100%;
      text-align: center;
      z-index: 9999;
      pointer-events: none;
      
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

      .lrc-line {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 28px;
    font-family: "隶书", "LiSu", serif;
    font-weight: normal;
    text-shadow: 0 0 10px rgba(0,0,0,0.8);
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
    margin: 0;
    top: 8;

    /* 金色高光游移效果 */
    background: linear-gradient(180deg, #ffdf6b, #fff) no-repeat 0 0 / 50% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    color: rgba(250, 250, 250, .25);
}

   
    .lrc-line.active {
      opacity: 1;
      transform: translateX(-50%) scale(1.1);
      z-index: 10;
    }
</style>
<div class="pa">
    <div id="custom-lrc-container"></div>
</div>
<script type="module">
    import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v4.js';
    const tz = TZ.TZ('pa');
    tz.add('audio', '', '', { src: 'http://cccimg.com/view.php/a46d3aab7de424c4d56e1cc8e80c512c.mp3 ' });
    tz.add('video', '', 'pd-vid', {src: 'http://cccimg.com/view.php/30d85f08f6e84acaa27e7201a2f69eba.mp4'}).style('opacity: 0.2;');
    tz.add('img', '', 'ma', { src: 'https://ff.xiaoqiaodali.top:5401/i/2026/09/09/6aa17362829dc.gif' }).style('bottom: 60px;').playmp3();
   
    tz.bgprog().style('bottom: 20px; color: #fefefe; width: 360px;');
    tz.fs().style('left: 20px; top: 20px;');
    const lrcString = `
      老家的月季花
老家的月季花
作词：尚文歌集
作曲：尚文歌集
老家院里那丛月季花
长在正房屋檐下
朵朵繁花带着清香
伴我走过儿时年华
每当花朵绽开的时候
小伙伴跑来奶奶家
嬉闹着讨要一朵
别像乌黑的头发
月季花啊 老家的月季花
我一生一世难以忘怀呀
儿时的伙伴啊
如今你漂泊在哪
月季花啊 老家的月季花
我一生一世难以忘怀呀
少年的时光啊
暖我余生岁岁年华
后来我离开了老家
远走他乡闯天涯
问过多少别样花香
最难忘老家的月季花
月季花啊 老家的月季花
我一生一世难以忘怀呀
儿时的伙伴啊
如今你漂泊在哪
月季花啊 老家的月季花
我一生一世难以忘怀呀
少年的时光啊
暖我余生岁岁年华
月季花啊 老家的月季花
我一生一世难以忘怀呀
儿时的伙伴啊
如今你漂泊在哪
月季花啊 老家的月季花
我一生一世难以忘怀呀
少年的时光啊
暖我余生岁岁年华`;
    function initCustomLrc(lrcText) {
      const container = document.getElementById('custom-lrc-container');
      const lines = [];
      
      const lineRegex = /\[(\d{2}):(\d{2})\.(\d{2,3})\](.*)/;
      const rawLines = lrcText.split('\n');
      
      rawLines.forEach(text => {
            const match = text.match(lineRegex);
            if (match) {
                const minutes = parseInt(match);
                const seconds = parseInt(match);
                const milliseconds = parseInt(match);
                const time = minutes * 60 + seconds + milliseconds / 1000;
                let content = match.trim();
               
                // 【关键修复】过滤乱码 ‌ 等所有 HTML 实体
                content = content.replace(/&#\d+;/g, '').trim();
               
                if (content) {
                  lines.push({ time, content, element: null });
                }
            }
      });
      lines.forEach((line) => {
            const div = document.createElement('div');
            div.className = 'lrc-line';
            div.textContent = line.content;
            container.appendChild(div);
            line.element = div;
            // 初始化高光位置在最左侧
            div.style.backgroundPosition = '0% 0';
      });
      const audio = document.querySelector('.pa audio');
      
      if (audio) {
            audio.addEventListener('timeupdate', () => {
                const currentTime = audio.currentTime;
                let activeIndex = -1;
                for (let i = 0; i < lines.length; i++) {
                  if (currentTime >= lines.time) {
                        activeIndex = i;
                  } else {
                        break;
                  }
                }
                lines.forEach((line, idx) => {
                  if (idx === activeIndex) {
                        line.element.classList.add('active');
                        // ====== 高光进度计算 ======
                        const startTime = lines.time;
                        // 下一句时间为本句结束时间，最后一句拿歌曲末尾大数兜底
                        const endTime = lines ? lines.time : 9999;
                        const dur = endTime - startTime;
                        let progress = (currentTime - startTime) / dur;
                        progress = Math.max(0, Math.min(1, progress));
                        // 修改背景位置，高光向右移动
                        line.element.style.backgroundPosition = `${progress * 100}% 0`;
                  } else {
                        line.element.classList.remove('active');
                        // 非当前句，高光重置到起点
                        line.element.style.backgroundPosition = '0% 0';
                  }
                });
            });
            
            audio.addEventListener('ended', () => {
               lines.forEach(line => {
                  line.element.classList.remove('active');
                  line.element.style.backgroundPosition = '0% 0';
               });
            });
      }
    }
    setTimeout(() => {
      const audioEl = document.querySelector('.pa audio');
      if(audioEl) {
            initCustomLrc(lrcString);
      } else {
            const observer = new MutationObserver(() => {
                const aud = document.querySelector('.pa audio');
                if(aud) {
                  initCustomLrc(lrcString);
                  observer.disconnect();
                }
            });
            observer.observe(document.querySelector('.pa'), { childList: true, subtree: true });
      }
    }, 500);
</script>

玫瑰 发表于 2026-9-12 17:52

沙发{:4_174:}

玫瑰 发表于 2026-9-12 17:53

好制作，精彩的分享，美景欣赏，{:4_204:}

霜染枫丹 发表于 2026-9-12 18:38

玫瑰 发表于 2026-9-12 17:53
好制作，精彩的分享，美景欣赏，

挺喜欢马老师的这个高亮漂移的效果，就试试歌词扇采用，谢谢玫瑰的支持，晚上好！{:4_204:}{:4_190:}

玫瑰 发表于 2026-9-12 18:41

霜染枫丹 发表于 2026-9-12 18:38
挺喜欢马老师的这个高亮漂移的效果，就试试歌词扇采用，谢谢玫瑰的支持，晚上好！
我没有看到这个制作代码。

霜染枫丹 发表于 2026-9-12 18:46

玫瑰 发表于 2026-9-12 18:41
我没有看到这个制作代码。

马老师有帖子，找他是主题帖，有代码

夕阳黄昏 发表于 2026-9-12 19:10

欣赏美帖！ 赞！

杨帆 发表于 2026-9-12 19:25

好听好看，效果漂亮，谢谢枫丹老师精彩分享{:4_204:}

霜染枫丹 发表于 2026-9-12 20:22

夕阳黄昏 发表于 2026-9-12 19:10
欣赏美帖！ 赞！

夕阳黄昏晚上好，欢迎您！

感谢您的支持，祝您秋安！{:4_191:}{:4_204:}

霜染枫丹 发表于 2026-9-12 20:23

杨帆 发表于 2026-9-12 19:25
好听好看，效果漂亮，谢谢枫丹老师精彩分享

感谢杨帆的支持，欢迎您！祝您吉祥快乐，秋日安好{:4_204:}{:4_190:}

红影 发表于 2026-9-12 22:50

这些月季开得真的太美了。欣赏枫丹好帖{:4_199:}

霜染枫丹 发表于 2026-9-12 23:24

红影 发表于 2026-9-12 22:50
这些月季开得真的太美了。欣赏枫丹好帖

学习使用了了马老师的教程，应该做个效果展示作为答谢。谢红影支持！{:4_204:}{:4_190:}

魏淑芬 发表于 2026-9-13 11:13

欣赏美帖， 点赞！{:4_204:}

霜染枫丹 发表于 2026-9-13 11:25

魏淑芬 发表于 2026-9-13 11:13
欣赏美帖， 点赞！

魏淑芬上午好！
即梦改版了，现在制图没有以前的选择多了{:4_173:}这个月季花是改版前最后一个视频。我想在制作一个作比较。恰好零点过了，再打开就不一样了。还挺人性化，以前那些资产还给保留了，还可以借鉴文案{:4_189:}
感谢您的支持，试了试这个高光游移的效果、祝您秋安！{:4_204:}{:4_190:}



雨季工作室 发表于 2026-9-18 17:38

谢谢枫丹老师精彩分享。

霜染枫丹 发表于 2026-9-18 20:56

雨季工作室 发表于 2026-9-18 17:38
谢谢枫丹老师精彩分享。

感谢雨季工作室的支持，晚上好~~{:4_204:}{:4_190:}

玫瑰 发表于 2026-9-19 12:17

补给分，精彩的分享。{:4_171:}
页: [1]
查看完整版本: 老家的月季花 学习馬老师教程文本高亮游移效果