霜染枫丹 发表于 2026-6-1 23:05

踏遍青山


<style>
    @import 'https://638183.freep.cn/638183/web/tz/tz.v4.css';
   
    .pa {
      --offsetX: 20px;
      --bg: url('https://ff.xiaoqiaodali.top:5401/i/2026/06/01/6a1d9b6920a11.gif') no-repeat center/cover;
      --ma-size: 6%;
      width: 1400px;
      height: 788px;
      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: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /* 每一句歌词的样式 */
    .lrc-line {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      white-space: nowrap;
      color: #fefefe;
      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: 0;
    }
   
    .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/7abfd0dd9947340aa80f7063ba2d0ea4.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/04/02/69ce16e493ac6.png'
})
.style('right: 40px; bottom: 120px;') // 【关键】合并写在这里
.playmp3();
   
    tz.bgprog().style('bottom: 10px; color: #fefefe; width: 400px;');
    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;
      });

      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');
                  } else {
                        line.element.classList.remove('active');
                  }
                });
            });
            
            audio.addEventListener('ended', () => {
               lines.forEach(line => line.element.classList.remove('active'));
            });
      }
    }

    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-6-2 07:50

早上问好，不知咋的，有视频没声音。是不是我新装的系统关系。{:4_199:}

也曾年轻 发表于 2026-6-2 07:59

https://pic.rmb.bdstatic.com/bjh/news/6f7ead5310d13b5a260236eb19311613.gif

霜染枫丹 发表于 2026-6-2 11:13

梦江南 发表于 2026-6-2 07:50
早上问好，不知咋的，有视频没声音。是不是我新装的系统关系。
梦江南上午好~~首先感谢您的支持！

关于您听不到歌曲，建议您首先查看在本地能否正确播放，还有一点您重装系统是否缺播放用软件。如果没有安装播放软件也是无法听到声音的，将鼠标放在任务栏的小喇叭上右键点击就出来了菜单，逐项检查一下。
我这首歌曲的格式是mp3，能顺利播放。
http://cccimg.com/view.php/7abfd0dd9947340aa80f7063ba2d0ea4.mp3]

霜染枫丹 发表于 2026-6-2 11:15

也曾年轻 发表于 2026-6-2 07:59


感谢也曾年轻的鼓励，祝您夏安~~{:4_204:}{:4_190:}

梦江南 发表于 2026-6-2 11:50

霜染枫丹 发表于 2026-6-2 11:13
梦江南上午好~~首先感谢您的支持！

关于您听不到歌曲，建议您首先查看在本地能否正确播放，还有一点您 ...

这个播放器也不能播放，{:4_201:}

魏淑芬 发表于 2026-6-2 12:51

欣赏好制作，点赞{:4_187:}

红影 发表于 2026-6-2 16:13

真好的制作，在枫丹的帖子里感受到对自然的热爱，如此踏遍青山，拍尽美景，多幸福啊。
很令人向上的好帖，给枫丹点赞{:4_199:}

霜染枫丹 发表于 2026-6-2 18:05

魏淑芬 发表于 2026-6-2 12:51
欣赏好制作，点赞

感谢魏淑芬的支持，下午好~~{:4_204:}{:4_190:}

霜染枫丹 发表于 2026-6-2 18:10

红影 发表于 2026-6-2 16:13
真好的制作，在枫丹的帖子里感受到对自然的热爱，如此踏遍青山，拍尽美景，多幸福啊。
很令人向上的好帖， ...

红影下午好~~玩这个东东，真是越玩越想玩。那些年走过一些很险峻的地方，喜欢拍摄风光，太危险的地方没敢去，如西藏。走在山里特别惬意，登顶的时候，很是高兴。也算给自己留下了一些回忆。谢谢您的支持。恭祝夏安~~{:4_204:}{:4_190:}
页: [1]
查看完整版本: 踏遍青山