论坛 › 欢乐水吧 › 精美相册影音《想你心已碎》

亚伦影音工作室 发表于 2025-4-3 16:30

精美相册影音《想你心已碎》

本帖最后由 亚伦影音工作室 于 2025-6-14 11:11 编辑 <br /><br /><style>
#papa {top:120px; left:-300px;background:url(https://pic1.imgdb.cn/item/6805ade358cb8da5c8ba9e03.webp)no-repeat center/cover;overflow: hidden;
width: 1286px;height: 720px;
transform-origin: center;
position: relative;
z-index: 1;--state: paused;}
.book-wrap {width: 450px;
            height: 320px;
            position: absolute;
            left: 46%;
            top: 20%;
            transform: rotatez(-10deg)rotateX(20deg);
            transform-style: preserve-3d;}
.page { width: 100%;
      height: 100%;
      position: absolute;
      border-radius: 2px;
      transform-origin: left;display: flex;
    justify-content: center;
    align-items: center;
      
      border: 15px solid #cccccc;
      box-shadow:0px 0px 0px 2px #000000, 0px 0px 0px 2px #000000;
      }
.book-contenr {animation: roll 42s0sinfinite var(--state);}
.book-content1{animation: roll12s 36sinfinite var(--state);}
.book-content2{animation: roll16s 32sinfinite var(--state);}
.book-content3{animation: roll20s 28sinfinite var(--state);}
.book-content4{animation: roll 24s 24sinfinite var(--state);}
.book-content5{animation: roll 28s 20sinfinite var(--state);}
.book-content6{animation: roll 32s16sinfinite var(--state);}
.book-content7{animation: roll 36s12sinfinite var(--state);}
.book-content8{animation: roll 38s8sinfinite var(--state);}
.book-content9{animation: roll 40s4sinfinite var(--state);}
      @keyframes roll {
   0%,40%{transform: rotateY(0)}
    40%,60%{transform: rotateY(-174deg);}
60%,100% {transform: rotateY(-180deg);}}
.mplayer { position: absolute; width: 300px; height: fit-content; display: flex; flex-direction: column; align-items: center; gap: 10px; color: #eee; margin: auto; top: 10%; left:8%;z-index: 20; }
    .mplayer::before { position: absolute; content: attr(data-time); width: 100%; text-align-last: justify; pointer-events: none; }
    .btnPlay { width: 20px; height: 20px; cursor: pointer; position: relative; }
    .btnPlay::after { position: absolute; content: ''; width: 100%; height: 100%; background: red; clip-path: var(--clip); }
    .progress { --prg: 0%; position: relative; width: 100%; height: 20px; display: grid; place-items: center start; background: linear-gradient(90deg, red var(--prg), gray var(--prg), gray 0) no-repeat center/100% 2px; padding: 0; margin: 0; }
    .thumb { position: absolute; left: calc(var(--prg) - 10px); width: 10px; height: 10px; background: red; border: 1px solid #FF0000; border-radius: 50%; cursor: pointer; box-sizing: border-box; }
    .play { --clip: polygon(10% 0,100% 50%,10% 100%); }
    .pause { --clip: polygon(35% 0,15% 0,15% 100%, 35% 100%,35% 0,75% 0,75% 100%,55% 100%,55% 0); }

.lrc {position:absolute;width: 600px;
    height: 150px;z-index: 3; left:55%;
      top: 70%;
    overflow: hidden;margin:0;
}

.lrc #ul {width: 100%;
padding: 0;list-style: none;transition: 0.3s all ease;
    margin: 0}
.lrc #ul li {
   font-family:华文隶书;
    font-size: 22px;
    color: #eee;
    font-weight: 200;
    transition: .3s all ease;
    list-style-type: none;
    text-align: center;display: block;
    width: 100%;
    margin: 0 auto;
    height: 50px;
    line-height: 35px;
}
.lrc #ulli.active{   font-size: 35px;
    color: #ff0000;
text-align: center; color: transparent; background: repeating-linear-gradient(to right, gold, lightgreen, snow, #ff0000, orange) 50%/200px 60px; -webkit-background-clip: text;filter:drop-shadow(#000 1px 0 0)drop-shadow(#000 0 1px 0)drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px0);}
#zs{position: absolute;top:5%; left:85%;width: 125px;height: 80px;font:100 1.5em 微软雅黑;z-index: 1111;color: #fff;cursor:pointer;}
#全屏{position: absolute;}
#退出{ position: absolute;opacity:0;}
</style>
<div id="papa">
<divid="zs"onclick="btnClick()"title="全屏展示/退出全屏" >
<div id="全屏">全屏展示</div>
<div id="退出">退出全屏</div>
</div>
<div class="book-wrap">
<div class="page" style="background: url(https://pic1.imgdb.cn/item/6818838658cb8da5c8dd8333.jpg)no-repeat center/cover"></div>
<div class="page book-content book-content1" style="background: url(https://pic1.imgdb.cn/item/681f6a8058cb8da5c8eb81f4.webp)no-repeat center/cover"></div>
<div class="page book-content book-content2" style="background: url(https://pic1.imgdb.cn/item/681f6bdf58cb8da5c8eb828d.webp)no-repeat center/cover">&nbsp;</div>
<div class="page book-content book-content3" style="background: url(https://pic1.imgdb.cn/item/681f6d5a58cb8da5c8eb834b.webp)no-repeat center/cover">&nbsp;</div>
<div class="page book-content book-content4" style="background: url(https://pic1.imgdb.cn/item/681f6f6c58cb8da5c8eb844e.jpg)no-repeat center/cover">&nbsp;</div>
<div class="page book-content book-content5" style="background: url(https://pic1.imgdb.cn/item/6824a1fc58cb8da5c8f1b5a2.jpg)no-repeat center/cover">&nbsp;</div>
<div class="page book-content book-content6" style="background: url(https://pic1.imgdb.cn/item/6824a19658cb8da5c8f1b56e.jpg)no-repeat center/cover">&nbsp;</div>
<div class="page book-content book-content7" style="background: url(https://pic1.imgdb.cn/item/683a8d3f58cb8da5c81e820c.jpg)no-repeat center/cover">&nbsp;</div>
<div class="page book-content book-content8" style="background: url(https://pic1.imgdb.cn/item/683a8cc858cb8da5c81e81bf.webp)no-repeat center/cover">&nbsp;</div>
<div class="page book-content book-content9" style="background: url(https://pic1.imgdb.cn/item/683a8cdf58cb8da5c81e81d1.webp)no-repeat center/cover">&nbsp;</div>
</div>
<div class="mplayer" data-time="00:00 00:00">
        <div class="btnPlay play"></div>
        <div class="progress">
                <div class="thumb"></div>
        </div>
</div>
<div class="lrc">
      <ul id="ul">
      </ul>
    </div>


</div>

<audio id="audio"autoplay loop src="https://s2.ananas.chaoxing.com/sv-w7/audio/ef/06/3c/2e53a7051e1da330537b864669cdf30f/audio.mp3" ></audio>

<script>
//获取需要操作的元素标识
const mplayer = document.querySelector('.mplayer');
const btnPlay = document.querySelector('.btnPlay');
const progress = document.querySelector('.progress');
const thumb = document.querySelector('.thumb');
const audio = document.querySelector('audio');
// 拖曳操作状态（初始值为假）
let isDraggable = false;

//时间格式化工具函数 ：秒转分秒 mm:ss 格式
const 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')}`;
};

// 联动函数 mState ：处理按钮形状
const mState = () => {papa.style.setProperty('--state', audio.paused ? 'paused' : 'running');
        btnPlay.className = `btnPlay ${['pause', 'play'][+audio.paused]}`;
};

// 获取设备指针所在点在进度条上的距离（百分比）
const getPercent = (e) => {
        const rect = progress.getBoundingClientRect();
        const left = rect.left;
        const width = rect.width;
        let x = e.clientX ?? e.touches?.?.clientX ?? e.changedTouches?.?.clientX;
        x = Math.min(width, Math.max(0, x - left));
        return x / width * 100;
};

// 滑块鼠标按下、触屏设备手指或触笔按下
thumb.onmousedown = thumb.ontouchstart = (e) => {
        isDraggable = true; // 拖曳状态进行中
        e.preventDefault(); // 阻止默认行为
};

// 文档指针松开、触屏设备手指或触笔弹开
document.onmouseup = document.ontouchend = (e) => {
    // 松开时若拖曳状态为真，驱动 audio 改变播放进度
        if (isDraggable) audio.currentTime = `${getPercent(e) * audio.duration / 100}`;
        isDraggable = false; //然后拖曳状态为假
};

// 文档上指针或手指、触笔移动时
document.onmousemove = document.ontouchmove = (e) => {
        if (!isDraggable) return; // 若不是拖曳状态则忽略之
        // 反之，若处于拖曳状态，给CSS变量 --prg 赋值
        progress.style.setProperty('--prg', `${getPercent(e)}%`);
        // 给时间文本信息即mplayer伪元素 attr(data-time) 函数赋值
        mplayer.dataset.time = `${formatTime(audio.duration * getPercent(e) / 100)} ${formatTime(audio.duration)}`;
};

// 进度条点击事件
progress.onclick = (e) => audio.currentTime = `${getPercent(e) * audio.duration / 100}`;

// 音频标签开始播放和暂停时执行联动函数
audio.onplaying = audio.onpause = () => mState();

// 音频时间更新事件 ：驱动文本时间信息及进度条进度变更
audio.ontimeupdate = () => {
        if (isDraggable) return; // 拖曳操作发生时忽略
        mplayer.dataset.time = `${formatTime(audio.currentTime)} ${formatTime(audio.duration)}`;
        progress.style.setProperty('--prg', `${audio.currentTime / audio.duration * 100}%`);
};

// 按钮单击 ：播放、暂停状态切换
btnPlay.onclick = () => audio.paused ? audio.play() : audio.pause();


function btnClick() {
            var zs= document.getElementById("zs");
            if (this.isFullscreen()) {
            全屏.style.opacity= '1'; 退出.style.opacity = '0';
                zs.style.cursor="ne-resize";
                exitFullScreen();
            } else {
         全屏.style.opacity= '0'; 退出.style.opacity = '1';
            zs.style.cursor="se-resize";
zs.style.visibility='visible';
                        if (zs.requestFullscreen) {
               papa.requestFullscreen();
                } else if (zs.webkitRequestFullScreen) {
                   zs.webkitRequestFullScreen();
                } else if (zs.mozRequestFullScreen) {
                papa.mozRequestFullScreen();
                } else if ( zs.msRequestFullscreen) {
                  zs.msRequestFullscreen();
                }

            }
      }
      // 退出全屏
      function exitFullScreen() {
            let exitFullScreen = document.exitFullScreen || document.mozCancelFullScreen || document.webkitExitFullscreen || document.msExitFullscreen;
            if (exitFullScreen) {
                exitFullScreen.call(document);
            }
      }
      // 判断是否全屏
      function isFullscreen() {
            return document.fullscreenElement || document.msFullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || false;
      }


</script>
<script>
var lrc = `想你心已碎
词曲：刘晓娟
编曲：大约冬季
演唱：影子
制作：达利
监制：吴发林
后期：鲁晓锋
出品：浩浩音乐
发行：歌美文化
宣推：歌林文化
曾经爱你不后悔
如今爱却变成泪
受伤的心谁体会
夜夜失眠难入睡
回忆往事有多美
如今寂寞没人陪
爱的路上你在退
而我却在痴心追
想你想你已心碎
哪怕想到花枯萎
死心塌地爱无悔
心心念念想你陪
想你想你已心碎
不管思念多狼狈
不求谁人能安慰
一生只等你来陪
回忆往事有多美
如今寂寞没人陪
爱的路上你在退
而我却在痴心追
想你想你已心碎
哪怕想到花枯萎
死心塌地爱无悔
心心念念想你陪
想你想你已心碎
不管思念多狼狈
不求谁人能安慰
一生只等你来陪
想你想你已心碎
不管思念多狼狈
不求谁人能安慰
一生只等你来陪
一生只等你来陪
`;
// 最开始获取到的歌词列表是字符串类型（不好操作）
let lrcArr = lrc.split('\n');
// 接收修正后的歌词数组
let result = [];
// 获取所要用到的dom列表
doms = {
    audio: document.querySelector("#audio"),
    ul: document.querySelector("#ul"),
    container: document.querySelector(".lrc")
}
// 将歌词数组转成由对象组成的数组，对象有time和word两个属性（为了方便操作）
for (let i = 0; i < lrcArr.length; i++) {
    var lrcData = lrcArr.split(']');
    var lrcTime = lrcData.substring(1);
    var obj = {
      time: parseTime(lrcTime),
      word: lrcData
    }
    result.push(obj);
}
// 将tiem转换为秒的形式
function parseTime(lrcTime) {
    lrcTimeArr = lrcTime.split(":")
    return +lrcTimeArr * 60 + +lrcTimeArr;
}
// 获取当前播放到的歌词的下标
function getIndex() {
    let Time = doms.audio.currentTime;
    for (let i = 0; i < result.length; i++) {
      if (result.time > Time) {
            return i - 1;
      }
    }
}
// 创建歌词列表
function createElements() {
    let frag = document.createDocumentFragment(); // 文档片段
    for (let i = 0; i < result.length; i++) {
      let li = document.createElement("li");
      li.innerText = result.word;
      frag.appendChild(li);
    }
    doms.ul.appendChild(frag);
}
createElements();
// 获取显示窗口的可视高度
let containerHeight = doms.container.clientHeight;
// 获取歌词列表的可视高度
let liHeight = doms.ul.children.clientHeight;
// 设置最大最小偏移量，防止显示效果不佳
let minOffset = 0;
let maxOffset = doms.ul.clientHeight - containerHeight;
// 控制歌词滚动移动的函数
function setOffset() {
    let index = getIndex();
    // 计算滚动距离
    let offset = liHeight * index - containerHeight / 2 + liHeight / 3;
    if (offset < minOffset) {
      offset = minOffset;
    };
    if (offset > maxOffset) {
      offset = maxOffset;
    };
    // 滚动
    doms.ul.style.transform = `translateY(-${offset}px)`;
    // 清除之前的active
    let li = doms.ul.querySelector(".active")
    if (li) {
      li.classList.remove("active");
    }
    // 为当前所唱到的歌词添加active
    li = doms.ul.children;
    if (li) {
      li.classList.add("active");
    }
};
// 当audio的播放时间更新时，触发该事件
doms.audio.addEventListener("timeupdate", setOffset);
</script>

清茶煮雪 发表于 2025-4-3 16:40

这个翻书效果好神奇{:4_199:}

清茶煮雪 发表于 2025-4-3 16:45

花潮的大佬这么多呀，一个个精美的贴子看得我脚步都移不动了{:4_189:}

清茶煮雪 发表于 2025-4-3 16:45

谢谢老师带来的精彩！{:4_187:}

梦油 发表于 2025-4-3 16:53

欣赏佳作，问候亚伦。

红影 发表于 2025-4-3 16:59

这相册制作漂亮，翻过后，图片也变成反方向角度的展示了，非常新奇的制作{:4_199:}

红影 发表于 2025-4-3 17:00

播放器和歌词的位置也设计得好，同步歌词很漂亮。
欣赏亚伦老师好帖{:4_199:}

老谟深虑 发表于 2025-4-3 18:00

          欣赏亚伦老师的好帖，晚上好！

小辣椒 发表于 2025-4-3 21:57

亚纶这个翻页效果特别漂亮，我有现成的，可以套用玩一个

小辣椒 发表于 2025-4-3 21:58

亚纶特别棒，每个效果都是美美的{:4_187:}

查看完整版本: 精美相册影音《想你心已碎》