《我家的小妹》 - 邓丽君 - 欢乐水吧 - 花潮论坛

亚伦影音工作室 发表于 2025-2-24 14:47

《我家的小妹》 - 邓丽君

本帖最后由亚伦影音工作室于 2025-2-24 21:42 编辑 <br /><br /><style>
#papa { margin: 10px 0 20px calc(50% - 670px); background:#000;width: 1286px; height: 720px; box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center; --state: running;}
#mb{width:100%;background:url('https://pic1.imgdb.cn/item/67bc0ae5d0e0a243d4033b7a.png') no-repeat center/cover;
height: 100%;
position: absolute;z-index: 2;
top:0%; left:0%;
}
.photo {width:42%;
height:100%;
position: absolute;z-index: 1;
top:0%; left:0%;
opacity: 0; transform: rotateY(180deg);
animation: round 32s linear infinite var(--state);
}
#papa:hover .photo{transform: rotateY(0deg); }

@keyframes round {0% {opacity: 0; }
4% {opacity: 1;}
6% {opacity: 1;}
18% {opacity: 0;}
}
.photo:nth-child(1) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/1636bc0d156def96d36aa161a8a722db.jpg)no-repeat 0 10px/cover;
animation-delay: 0s;
}
.photo:nth-child(2) {background:#000 url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/787efb70c82cf4a89a89ff8e65d7aa12.jpg)no-repeat 0 0px/cover;
animation-delay: 4s;
}
.photo:nth-child(3) {background:#000 url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/dab44b34758f69cd90a964a1d44969af.png)no-repeat 0 10px/cover;
animation-delay: 8s;
}
.photo:nth-child(4) {background:#000 url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/cc19c047f98660b8425d2de3bdfd7b3c.jpg)no-repeat 0 10px/cover;
animation-delay: 12s;
}
.photo:nth-child(5) {background:#000 url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/b13bc54ca1e900b0f4ecc9c090358e89.jpg)no-repeat 0 10px/cover;
animation-delay: 16s;
}
.photo:nth-child(6) { background:#000 url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/a4a7195b6b8c0ae13efda5e7bee387ad.jpg)no-repeat 0 10px/cover;
animation-delay: 20s;
}
.photo:nth-child(7) { background:#000 url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/421e214859cbe2253593d7e38dbd1a6c.jpeg)no-repeat 0 10px/cover;
animation-delay: 24s;
}
.photo:nth-child(8) { background:#000 url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/59fe12000912119c3ab62e065b7d99e4.jpg)no-repeat 0 0px/cover;
animation-delay: 28s;
}

#bfq{height: 40px; width:96%; position:absolute;left: 2%; top: 92%;overflow: hidden; background:url('https://pic1.imgdb.cn/item/66c40607d9c307b7e912340a.png') no-repeat center/cover; border-radius: 6px;box-shadow: 0px 0px 0px 0.25px #fff; z-index: 3; }
#papa:hover #bfq{transform:scale(.6 , .8);left:20%;top:86%;}
#mboard { height: 40px; width:100%;justify-content: center; align-items: center; gap: 8px; position: absolute;display: flex;left: -5%;--state: running; }
#mboard img { width: 26px; cursor: pointer; filter:invert(100%)hue-rotate(180deg);}
#tMsg1, #tMsg2 { width: 45px; font-size: 13px; text-align: center;color: #eee; }
#volwrap { position: absolute; width: 120px; height: 40px; right: -40px; display: grid; place-items: center; background: none; border-radius: 20px; }
input {
-webkit-appearance: none;
appearance: none;
margin: 0;
outline: 0;
background-color: transparent;
width: 100%;
}
::-webkit-slider-runnable-track {
height: 4px;border-radius: 20px;
background: #eee;
}
::-webkit-slider-container {
height: 18px;border-radius: 30px;
overflow: hidden;
}
::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 12px;
height: 12px;
border-radius: 50%;
background: #f44336;
border: 1px solid transparent;
margin-top: -4px;
border-image: linear-gradient(#f44336,#f44336) 0 fill / 5 11 5 0 / 0px 0px 0 2000px;
}

#btnMute:hover ~ #volwrap ;
#volume { position: absolute; width: 40px; height: 2px;display: none; }
#prog { --track:#eee; --prog: #ff0000; --prg: 0%; width: 900px; height: 20px; cursor: pointer; background: linear-gradient(to right, var(--prog) var(--prg), var(--track) 0) no-repeat 0% 50%/100% 4px; border-radius: 20px;}

ul,li,ol{list-style: none;}
.containe{width: 800px;z-index:3;
height: 580px;list-style:none;
overflow: hidden;
position: absolute;
margin-left: 40%;
margin-right: auto;
top:5%;
}
#papa:hover .containe{transform:scale(.8) ;}

.lrcList{font:200 1.6em 华文隶书;
line-height: 55px;filter:drop-shadow(#000 1px 1px 0px)drop-shadow(#000 1px 1px 0px) ;
color: #fff; overflow: hidden;
text-align: center;
transition:all 0.2s;/* 过渡动画。实现歌词上下移动的动画 */
}
.lrcList li{list-style-type: none;
display: block;
transition:all 0.2s;
height: 52px;
opacity: 0.8;
}
.lrcList .current{
transform: scale(1.4);
color:#F96565;
opacity: 1;
}
</style>
<div id="papa">
<div id="mb"></div>
<div>
<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>
</div>
<div class="containe" id="containe">
<ul class="lrcList" id="lrcList">
         <li class="current"></li>
   </ul>
</div>

<div id="bfq">
<div id="mboard">
<img id="btnPlay" src="https://638183.freep.cn/638183/web/icon/play.svg" title="播放/暂停(Alt+X)" alt="" />
<span id="tMsg1">00:00</span>
<span id="prog"></span>
<span id="tMsg2">00:00</span>
<img id="btnMute" src="https://638183.freep.cn/638183/web/icon/unmuted.svg" title="静音 (Alt+J)" alt="" />
<div id="volwrap"><input id="volume" type="range" min="0" max="1" step="0.1" value="0.8" /></div>
</div>
</div>

</div>
<p><audio id="aud" src="https://ysj147.s3-us-east-1.ossfiles.com/zzsc/mp3/wjdxiaomei.mp3" autoplay loop></audio></p>

<script>

var lastVolume = 1, muted = false;

var imgAr = [
'https://638183.freep.cn/638183/web/icon/play.svg',
'https://638183.freep.cn/638183/web/icon/pause.svg',
'https://638183.freep.cn/638183/web/icon/unmuted.svg',
'https://638183.freep.cn/638183/web/icon/muted.svg',
];

var setVolume = (val) => Math.min(1, Math.max(0, val));

var setMute = () => {
if(lastVolume === 0) return;
muted = !muted;
muted ? (aud.volume = 0, btnMute.src = imgAr) : (aud.volume = lastVolume, btnMute.src = imgAr);
};

var s2m = (seconds) => {
const secs = Math.floor(seconds || 0);
return `${String(secs/60|0).padStart(2,'0')}:${String(secs%60).padStart(2,'0')}`;
};

var mState = () => {papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
btnPlay.src = aud.paused ? imgAr : imgAr;
btnPlay.title = (aud.paused ? '播放' : '暂停') + ' (Alt+X)';
};

document.addEventListener('keydown', e => {
if(!e.altKey) return;
switch (e.keyCode) {
case 88:
btnPlay.click();
break;
case 74:
setMute();
break;
case 187: case 107:
aud.volume = setVolume(aud.volume + 0.1);
lastVolume = aud.volume;
break;
case 189: case 109:
aud.volume = setVolume(aud.volume - 0.1);
lastVolume = aud.volume;
break;
default:
return;
}
});

aud.onplaying = aud.onpause = () => mState();

aud.ontimeupdate = () => {
prog.style.setProperty('--prg', aud.currentTime/aud.duration*100 +'%');
tMsg1.innerText = s2m(aud.currentTime);
tMsg2.innerText = s2m(aud.duration);
};

aud.onvolumechange = () => {
btnMute.src = aud.volume === 0 ? imgAr : imgAr;
volume.value = aud.volume;
}

btnPlay.onclick = () => aud.paused ? aud.play() : aud.pause();
btnMute.onclick = () => setMute();
volume.onchange = () => aud.volume = lastVolume = volume.value;
prog.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / prog.offsetWidth;
prog.onmousemove = (e) => prog.title = s2m(e.offsetX * aud.duration / prog.offsetWidth);
volwrap.onmouseover = () => volwrap.title = '音量 : ' + volume.value + ' (Alt++/-)'

</script>
<script>
letlrc = `《我家的小妹》 - 邓丽君
词：孙仪 | 曲：汤尼
歌词编辑：亦是金
- - - - - -
我家的小妹刚满呀十八岁
生得象一朵花笑起来人更美
好多人都在追她没有看上谁
要等那有情人不知他是谁
我家的小妹刚满呀十八岁
生得象一朵花笑起来人更美
谁要追我小妹欢迎你来追
要追呀先排队不管你是谁
- - - - - -
我家的小妹刚满呀十八岁
生得象一朵花笑起来人更美
好多人都在追她没有看上谁
要等那有情人不知他是谁
我家的小妹刚满呀十八岁
生得象一朵花笑起来人更美
谁要追我小妹欢迎你来追
要追呀先排队不管你是谁
- - 谢谢欣赏 - -
`;

function parseLRC(LRC){
let lines = LRC.split('\n'); // 把歌词转为数组
let LRCArr = [];// 歌词数组
// 遍历数组
lines.forEach(item => {
   let parts = item.split("]"); //
   let timer =parts.slice(1).trim();//
   let obj = {
         time: parseTime(timer),
         word: parts.trim()==""?"":parts
   }
   // console.info( obj );
   LRCArr.push(obj);
});
return LRCArr;
}
function parseTime(timer){
let t = timer.split(":");
let result = Number(t)*60 + Number(t);
return result ;
}
function findIndex(){
// 播放器当前时间
let index = -1;
let curTime = doms.audio.currentTime;
for(let i=0; i<=LRCData.length-1 ; i++){
   if( curTime < LRCData.time ){
         index = i - 1;
         returnindex;
   }
}
// 找遍了，都没有歌词，说明播放完毕里，显示最后一句歌词。
index = LRCData.length-1
return index;
}

function createLrcList(lrc){
// 避免多次操作 DOM。创建一个 DOM 片段，它不会显示，但是可以集中处理 DOM。
let frag = document.createDocumentFragment();
doms.lrcList.innerHTML = "";
lrc.forEach(item=>{
   let li = document.createElement("li");
   li.innerHTML = item.word ;
   frag.appendChild(li);
});
doms.lrcList.appendChild(frag);
}

/*
设置歌词 ul 的偏移量
*/
function setOffset(index){
let dis =-1*( index * liH + liH/2- conH/2 );// 位移距离
doms.lrcList.style.transform = `translateY(${dis}px)`;
console.info( dis );
}
/*
设置歌词高亮
*/
function setLight(index){
let ul = doms.lrcList;
let lis = ul.children;
let cur = document.querySelector(".current");
if( cur ){ // 如果存在
   cur.classList.remove("current");
}
lis.classList.add("current");
}

let doms = {
audio:document.querySelector("audio"),
lrcList:document.querySelector("#lrcList"),
container:document.querySelector("#containe")
}
let LRCData = parseLRC(lrc);
createLrcList(LRCData);// 创造歌词 li
let conH = doms.container.clientHeight;// 容器高度
let liH = doms.lrcList.children.clientHeight;// li 高度
// 初始化歌词位置，让第一句歌词在歌词区中间
doms.lrcList.style.transform = `translateY(${-1*( liH/2- conH/2)}px)`;

doms.audio.addEventListener("timeupdate",function(){
let index = findIndex();
setLight(index);// 歌词位移
setOffset(index); // 歌词高亮
});
</script>

老谟深虑 发表于 2025-2-24 17:42

欣赏老师的精彩音画，点赞！

红影发表于 2025-2-24 20:08

漂亮的图片轮播，貌似后面的美女图图太靠上了点，有几个美女的脸都没显示全{:4_173:}

红影发表于 2025-2-24 20:08

漂亮的歌词方式和图片轮播方式，这制作真美。
欣赏亚伦老师好帖{:4_199:}

亚伦影音工作室 发表于 2025-2-24 20:51

红影发表于 2025-2-24 20:08
漂亮的图片轮播，貌似后面的美女图图太靠上了点，有几个美女的脸都没显示全

谢谢指导，已修改！

小辣椒 发表于 2025-2-24 20:57

亚纶这个png背景用的好，美女图片转换让背景衬托效果更加漂亮了{:4_199:}

小辣椒 发表于 2025-2-24 20:58

感谢亚纶的精彩分享{:4_187:}

红影发表于 2025-2-24 22:03

亚伦影音工作室发表于 2025-2-24 20:51
谢谢指导，已修改！

嗯嗯，看到了，现在的更漂亮了{:4_187:}

朵拉发表于 2025-2-25 11:54

啧啧，制作漂亮{:4_204:}

页: [1]

花潮论坛's Archiver

《我家的小妹》 - 邓丽君