霜染枫丹 发表于 2026-2-24 00:44

见花如面

<style>
    @import 'https://638183.freep.cn/638183/web/tz/tz.v5.css';
    .pa { --bg: url('https://ff.xiaoqiaodali.top:5401/i/2026/02/24/699c7c92456ef.gif') no-repeat center/cover; --ma-size: 12%;}
    /* 核心修改：给视频添加更高的z-index和定位 */
    .vid {
      width: 10vw;
      height: 10vw;
      border-radius: 50%;
      mix-blend-mode: screen;
      box-shadow: 5px 5px 10px white, -5px -5px 10px yellow;
      position: relative;/* 必须添加定位才能让z-index生效 */
      z-index: 9999;      /* 极高的层级，确保不会被遮挡 */
    }

    /* 歌词样式保持不变，层级略低于视频但高于背景 */
    .lyrics-container {
      position: absolute;
      left: 50%;
      top: 10%;
      transform: translate(-50%, -50%);
      text-align: center;
      color: #ffffff;
      font-size: 18px;
      text-shadow: 0 0 5px #000, 0 0 10px #000;
      z-index: 100;
      width: 80%;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }
    .current-lyric {
      font-size: 24px;
      margin-bottom: 10px;
      transition: all 0.3s ease;
    }
    .next-lyric {
      font-size: 16px;
      opacity: 0.7;
    }
</style>

<div id="tzbrother"></div>
<div id="tzcontainer">
    <div class="pa">
      <!-- 歌词显示容器 -->
      <div class="lyrics-container">
            <div class="current-lyric"></div>
            <div class="next-lyric"></div>
      </div>
    </div>
</div>

<script type="module">
    import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v5.js?v=1';

    const tz = TZ.TZ('pa');

    tz.add('audio', '', '', { src: 'http://cccimg.com/view.php/dcebcf4fad5075c6b07f1436e72a7f51.mp3' });
    tz.add('video', '', 'pd-vid', { src: 'http://cccimg.com/view.php/3e8ea5a337c2db1ae322937e2c90d16d.mp4' });
    const videoPlayer = tz.add('video', '', 'vid ma', {
      disablePictureInPicture: 'true',
      src: 'http://cccimg.com/view.php/9beb4287e264cb5f8376ee74b4f22d21.mp4'
    }).playmp3();

    tz.bgprog().style('bottom: 20px; color: #fefefe; width: 240px;');
    tz.fs().style('right: 20px; top: 20px;');
    tz.autoMid();

    // 歌词数据
    const gc = `见花如面
词曲：风哥
演唱：风哥
清晨的露水吻过花瓣
好像你寄来的问候信笺
拆开一缕香 蔓延成思念
荒芜里种下整个春天
时光和季节都会变迁
它替我穿越人海与你相见
一朵一笑颜 愈合了失眠
原来我们从未走远
见花如面 如面 如面
每一束都是最温柔的寒暄
轻轻的唤醒 所有的缱绻
无论多远 如低语在耳边
见花如面 如面 如面
深情的问候都藏在蕊间
玫瑰说早安 茉莉道晚安
世间最温柔不过一句 我在
时光和季节都会变迁
它替我穿越人海与你相见
一朵一笑颜 愈合了失眠
原来我们从未走远
见花如面 如面 如面
每一束都是最温柔的寒暄
轻轻的唤醒 所有的缱绻
无论多远 如低语在耳边
见花如面 如面 如面
深情的问候都藏在蕊间
玫瑰说早安 茉莉道晚安
世间最温柔不过一句 我在
见花如面 如面 如面
每一束都是最温柔的寒暄
轻轻的唤醒 所有的缱绻
无论多远 如低语在耳边
见花如面 如面 如面
深情的问候都藏在蕊间
玫瑰说早安 茉莉道晚安
世间最温柔不过一句 我在`;

    // 解析歌词的函数
    function parseLyrics(lyricText) {
      const lyrics = [];
      const regex = /\[(\d{2}):(\d{2})\.(\d{2})\](.*)/g;
      let match;

      while ((match = regex.exec(lyricText)) !== null) {
            const minutes = parseInt(match);
            const seconds = parseInt(match);
            const milliseconds = parseInt(match);
            const time = minutes * 60 + seconds + milliseconds / 100;
            const text = match.trim();

            if (text) {
                lyrics.push({ time, text });
            }
      }

      return lyrics;
    }

    // 解析歌词
    const lyrics = parseLyrics(gc);
    let currentLyricIndex = 0;

    // 获取歌词显示元素
    const currentLyricEl = document.querySelector('.current-lyric');
    const nextLyricEl = document.querySelector('.next-lyric');

    // 更新歌词显示的函数
    function updateLyrics(currentTime) {
      // 找到当前应该显示的歌词
      for (let i = currentLyricIndex; i < lyrics.length; i++) {
            if (currentTime >= lyrics.time && (i === lyrics.length - 1 || currentTime < lyrics.time)) {
                if (i !== currentLyricIndex) {
                  currentLyricIndex = i;
                  currentLyricEl.textContent = lyrics.text;

                  // 显示下一句歌词（如果有）
                  if (i + 1 < lyrics.length) {
                        nextLyricEl.textContent = lyrics.text;
                  } else {
                        nextLyricEl.textContent = '';
                  }
                }
                break;
            }
      }
    }

    // 监听视频/音频的时间更新事件
    const mediaElement = document.querySelector('video') || document.querySelector('audio');
    if (mediaElement) {
      mediaElement.addEventListener('timeupdate', function() {
            updateLyrics(this.currentTime);
      });

      // 初始化显示第一句歌词
      if (lyrics.length > 0) {
            currentLyricEl.textContent = lyrics.text;
            if (lyrics.length > 1) {
                nextLyricEl.textContent = lyrics.text;
            }
      }
    }
</script>

霜染枫丹 发表于 2026-2-24 00:51

本帖最后由 霜染枫丹 于 2026-2-28 00:00 编辑 <br /><br />'https://ff.xiaoqiaodali.top:5401/i/2026/02/24/699c7c92456ef.gif

也曾年轻 发表于 2026-2-24 08:49

https://img.mp.sohu.com/upload/20170711/d266dda46b9648e9a00b23f9f1260e19.png

红影 发表于 2026-2-24 09:36

漂亮，这歌曲也好听。
欣赏枫丹好帖{:4_187:}

小星世龙 发表于 2026-2-25 14:42

{:4_178:}{:4_178:}{:4_178:}

霜染枫丹 发表于 2026-2-25 17:35

小星世龙 发表于 2026-2-25 14:42


小星丗龙下午好，感谢您的支持鼓励！羡慕您的文采，很高兴能在一个平台交流，祝您写作愉快！新春快乐{:4_187:}{:4_190:}

射天狼 发表于 2026-2-26 16:07

一枝红艳露凝香，更有蜂儿采蜜忙！{:4_204:}

霜染枫丹 发表于 2026-2-26 20:06

射天狼 发表于 2026-2-26 16:07
一枝红艳露凝香，更有蜂儿采蜜忙！

欢迎射天狼，晚上好！

感谢您的支持鼓励，新春快乐！！
https://cccimg.com/view.php/c8e606c8f67f703213d7138c756ade23.gif
页: [1]
查看完整版本: 见花如面