大侠霍元甲－徐小明演唱版 - 音画音乐🎶 - 数字音乐论坛 - Powered by Discuz! Archiver

怀旧金典 › 音画音乐🎶 › 大侠霍元甲－徐小明演唱版

四季歌 发表于 2026-6-2 20:36:09

大侠霍元甲－徐小明演唱版

<style>
#papa{position: relative;
         width: 1286px;
         height: 720px;
         margin-left: -300px;
         margin-top: 10px;
         overflow: hidden;z-index:12345;
         background:url('https://picasa.eu.org/i/2026/06/02/nlq6cf.png')no-repeat center/cover;
   }
#pBlk {background: url('https://picasa.eu.org/i/2026/06/02/ne2c65.jpg')no-repeat center/cover;
width:100%;
height:100%;
position:relative;
margin:auto;
top:0%;

}
#pBlk div {
background-size:1286px 720px;
background-repeat: no-repeat center/cover;
float:left;
}
   .lyrics-container {font:400 2em 华文隶书;
         width: 840px;
         height: 400px;
         overflow: hidden;
         position:absolute;
         top: 35%;
         left: 2%;
      filter:drop-shadow(#000 1px 2px 1px);
         padding: 20px;
         box-sizing: border-box;
         z-index: 3;
   }

   .lyrics-wrapper {
         position: absolute;
         top: 20px;
         right: 20px;
         display: flex;
         flex-direction: row-reverse;
         height: calc(100% - 40px);
         transition: transform 0.5s ease;
   }

   .lyrics-column {
         writing-mode: vertical-rl;
         text-orientation: upright;
         line-height: 1.2;
         margin-left: 8px;
         height: 100%;
         white-space: nowrap;
         opacity: 0;
         transform: translateY(280px)translateX(-250px)rotate(100deg)scale(1.2);
         transition: opacity 1s, transform 1s;
         color: #00ff00 !important;
   }

   .lyrics-column.active {
         opacity: 1;transform:scale(1);
         transform: translate(0);
   }

   .lyrics-column .line {
         margin-bottom: 15px;
   }

   .lyrics-column .line.active {
         color: #fff000 !important;
   }


   #currentTime{font:normal 20px 华文隶书;
position: absolute;
         left: 20px;
         top: 20px;
   color: #ffffff ;z-index: 40;
   }
#player {
position: absolute;z-index: 40;
left:85%;
bottom: 50px;
width: 150px;
height: 150px;
      opacity: 1;
transition: .4s;
display: grid;
place-items: center;
--sp1: 0; --sp2: 1;
}
#player::before, #player::after {
position: absolute;
content: '';
cursor: pointer;
transition: .4s;
}
#player::before {width: 150px;height: 150px;background:url('https://pic.imgdb.cn/item/65f0d8669f345e8d03ff5c34.png')no-repeat center/cover;
opacity: var(--sp1);}
#player::after {width: 150px;height: 150px;background:url('https://pic.imgdb.cn/item/65f0d8299f345e8d03ff0b31.gif')no-repeat center/cover;
opacity: var(--sp2);}
</style>

<divid="papa">
<div id='pBlk'></div>
<div id="currentTime">00:00</div>
<div class="lyrics-container">
   <div class="lyrics-wrapper" id="lyricsWrapper"></div>
</div>
<div id="player" title="暂停/播放" ></div>
</div>

<audio id="audio" src="https://tc.boxue.ltd/view.php/41c16a5dcd4ad4a18048ae620ed47508.mp3"autoplay loop></audio>

<script>
   document.addEventListener('DOMContentLoaded', function() {

const currentTimeDisplay = document.getElementById('currentTime');

const lyricsWrapper = document.getElementById('lyricsWrapper');
const lyricsContainer = document.querySelector('.lyrics-container');

// LRC歌词数据
const lrc = `大俠霍元甲（徐小明演唱）
昏睡百年國人漸已醒
睜開眼吧小心看吧
哪個愿臣虜自認
因為畏縮與忍讓
人家驕氣日盛
開口叫吧高聲叫吧
這里是全國皆兵
歷來強盜要侵入
最終必送命
萬里長城永不倒
千里黃河水滔滔
江山秀麗疊彩鋒嶺
問我國家哪像染病
沖開血路揮手上吧
要致力國家中興
豈讓國土再遭踐踏
個個負起使命
萬里長城永不到
千里黃河水滔滔
江山秀麗疊彩鋒嶺
問我國家哪像染病
沖開血路揮手上吧
要致力國家中興
豈讓國土再遭踐踏
這睡獅漸已醒
`;

// 解析LRC歌词
function parseLRC(lrcText) {
   const lines = lrcText.split('\n');
   const result = [];

   for (const line of lines) {
         const timeMatch = line.match(/^\[(\d+):(\d+)\.(\d+)\](.*)/);
         if (timeMatch) {
            const minutes = parseInt(timeMatch);
            const seconds = parseInt(timeMatch);
            const hundredths = parseInt(timeMatch);
            const text = timeMatch.trim();

            const time = minutes * 60 + seconds + hundredths / 100;
            result.push({ time, text });
         }
   }

   return result;
}

const lyrics = parseLRC(lrc);
let currentLyricIndex = 0;

// 创建新歌词列
function createNewLyricsColumn(text) {
   const column = document.createElement('div');
   column.className = 'lyrics-column';

   const line = document.createElement('div');
   line.className = 'line';
   line.textContent = text;
   column.appendChild(line);

   lyricsWrapper.insertBefore(column, lyricsWrapper.firstChild);

   // 激活列动画
   setTimeout(() => {
         column.classList.add('active');
   }, 100);

   // 激活行高亮
   setTimeout(() => {
         line.classList.add('active');
   }, 500);

   return column;
}

// 计算容器能容纳多少列
function calculateMaxColumns() {
   const containerWidth = lyricsContainer.clientWidth - 40;
   const columnWidth = 30;
   return Math.floor(containerWidth / columnWidth);
}

let maxColumns = calculateMaxColumns();

window.addEventListener('resize', function() {
   maxColumns = calculateMaxColumns();
});

// 显示歌词
function displayLyric(text) {
   // 创建新列
   const newColumn = createNewLyricsColumn(text);

   // 如果列数超过最大值，移除最左边的列
   if (lyricsWrapper.children.length > maxColumns) {
         const lastColumn = lyricsWrapper.lastChild;
         lastColumn.style.opacity = '0';
         lastColumn.style.transform = 'translateX(20px)';

         // 动画结束后移除
         setTimeout(() => {
            lyricsWrapper.removeChild(lastColumn);
         }, 500);
   }
}

// 重置歌词显示
function resetLyrics() {
   lyricsWrapper.innerHTML = '';
   currentLyricIndex = 0;
}

// 更新进度条和时间显示（使用负数递减模式）
audio.addEventListener('timeupdate', function() {
   const currentTime = audio.currentTime;
   const duration = audio.duration || 1;
   // 更新进度条(已隐藏）

const remainingTime = duration - currentTime;
   currentTimeDisplay.textContent = `-${formatTime(remainingTime)}`;


   while (currentLyricIndex < lyrics.length && currentTime >= lyrics.time) {
         displayLyric(lyrics.text);
         currentLyricIndex++;
   }
});

// 音频开始播放时重置歌词
audio.addEventListener('play', function() {
   if (audio.currentTime === 0) {
         resetLyrics();
   }
});

// 格式化时间显示
function formatTime(seconds) {
   const mins = Math.floor(seconds / 60);
   const secs = Math.floor(seconds % 60);
   return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
}

});

player.addEventListener('click', () => audio.paused ? audio.play() : audio.pause());
let mState = () => audio.paused ? (player.style.setProperty('--sp1','1'), player.style.setProperty('--sp2','0')) : (player.style.setProperty('--sp1','0'), player.style.setProperty('--sp2','1'));
audio.addEventListener('play', () => mState());
audio.addEventListener('pause', () => mState());

</script>
<script>
   var pics = [
"https://picasa.eu.org/i/2026/06/02/ne29l8.jpg",
"https://picasa.eu.org/i/2026/06/02/ne2c65.jpg",
"https://picasa.eu.org/i/2026/06/02/ne29l8.jpg",
"https://picasa.eu.org/i/2026/06/02/ne2c65.jpg",
"https://picasa.eu.org/i/2026/06/02/ne29l8.jpg",
"https://picasa.eu.org/i/2026/06/02/ne2c65.jpg",
"https://picasa.eu.org/i/2026/06/02/ne29l8.jpg",
"https://picasa.eu.org/i/2026/06/02/ne2c65.jpg",
"https://picasa.eu.org/i/2026/06/02/ne29l8.jpg",
"https://picasa.eu.org/i/2026/06/02/ne2c65.jpg",
"https://picasa.eu.org/i/2026/06/02/ne29l8.jpg",
"https://picasa.eu.org/i/2026/06/02/ne2c65.jpg"
];
   let bw = pBlk.clientWidth / 15, bh = pBlk.clientHeight / 15;
   let picIdx = 0;
   for (var i = 0; i < 15; i++) {
   for (var j = 0; j < 15; j++) {
      var oDiv = document.createElement('div');
      oDiv.style.backgroundImage = `url(${pics})`;
      //oDiv.style.backgroundRepeat = `no-repeat`;
      oDiv.style.backgroundPosition = -j * bw + 'px ' + (-i * bh) + 'px';
      oDiv.style.width = bw + 'px';
      oDiv.style.height = bh + 'px';
      oDiv.style.transition = (1 + Math.random()) + 's';
      //oDiv.style.float = 'left';
      pBlk.appendChild(oDiv);
   }
   };
   var allDiv = pBlk.querySelectorAll('div');
   var t = null
   let chgPic = () => {
   let index = allDiv.length - 1;
   picIdx++; picIdx %= pics.length;
   t = setInterval(function() {if(!audio.paused){
      if (index == -1) {
         clearInterval(t);
         allDiv.forEach(aDiv => {
         aDiv.style.opacity = 1;
         aDiv.style.transform = 'translate(0px,0px)'
         });
         return;
      }
      allDiv.style.backgroundImage = `url(${pics})`;
      allDiv.style.transform = 'translate(0px,200px)';
      allDiv.style.opacity = 0;
      index--;}
   }, 10);
setTimeout(chgPic, 10000);
   }
   chgPic();

</script>

页: [1]

查看完整版本: 大侠霍元甲－徐小明演唱版