翁奕童苑 发表于 2022-6-21 10:43

《雨巷佳人》演唱/么健

本帖最后由 翁奕童苑 于 2022-6-24 13:48 编辑 <br /><br /><p></p>
<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1620039">
<style>
.outer { left: -180px; top: 10px; width: 960px; height: 600px;box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 10px #0000ff; overflow: hidden;border-radius:6%;background: transparent;position: relative; }
.picbox        { position: absolute; width: 960px; height: 600px; animation: fadeout 2s; }
.mama { left: 20px; bottom: 40px; width: fit-content; height: fit-content; position: absolute; cursor: pointer; border-radius: 0 100%; background: linear-gradient(transparent,green); }
.wrap { width: 90px; height: 60px; box-reflect: below 0 linear-gradient(rgba(0,0,0,.01),#000); -webkit-box-reflect: below 0 linear-gradient(rgba(0,0,0,.01),#000); position: relative; }
.mama meter { width: 90px; position: relative; }
.wrap span { width: 6px; height: 60px; bottom: -8px; display: inline-block; position: absolute; }
.wrap span::before { position: absolute; content: ''; width: inherit; height: 3px; background: #eee; top: -3px; animation: up 1s ease-in infinite; }
.lrcbox { transform: translate(320px, 500px); font: bold 2.6em / 2em sans-serif; color: #00f;lightgreen; text-shadow: 0px 2px 0px #f00; border-radius: 100% 0; position: absolute; }
@keyframes up { from { top: -6px; } to { top: -16px; } }
@keyframes fadein { from { opacity: .1; } to {opacity: 1; } }
@keyframes fadeout { from { opacity: 1; } to {opacity: .1; } }
</style>
<div class="outer">
        <img class="picbox" src="https://s1.ax1x.com/2022/06/14/XhVq2j.jpg" alt="" />
        <div class="mama">
                <div class="wrap"></div>
                <meter id="meter" value="0" min="0" max="100" low="33" high="66" optimum="70"></meter>
        </div>
        <div class="lrcbox">Loading ...</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1456216220.mp3" autoplay="autoplay" loop="loop"></audio>

<script>

let mama = document.querySelector('.mama'),
        picbox = document.querySelector('.picbox'),
        wrap = document.querySelector('.wrap'),
        lrcbox = document.querySelector('.lrcbox'),
        aud = document.querySelector('#aud'),
        meter = document.querySelector('#meter');
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min,
        prog = (tt, cc) => 100 * cc / tt;
let idx = 0, flag = true, slip= 1;
let picAr = [
        'https://s1.ax1x.com/2022/06/14/XhVjrq.jpg',
        'https://s1.ax1x.com/2022/06/14/XhVLxs.jpg',
        'https://s1.ax1x.com/2022/06/14/XhVq2j.jpg',
        'https://s1.ax1x.com/2022/06/14/XhVXMn.jpg',
        'https://s1.ax1x.com/2022/06/14/XhVvq0.jpg',
        'https://s1.ax1x.com/2022/06/14/XhVzZV.jpg',
        'https://s1.ax1x.com/2022/06/14/XhZeZ6.jpg',
        'https://s1.ax1x.com/2022/06/14/XhZmdK.jpg',
        'https://s1.ax1x.com/2022/06/14/XhZAMR.jpg',
        'https://s1.ax1x.com/2022/06/14/XhZEs1.jpg',
        'https://s1.ax1x.com/2022/06/14/XhZVqx.jpg'
];
let lrcAr =[
        ['0.00','《雨巷佳人》'],
        ['8.20','词/修篱种菊 曲/金琳琳'],
        ['17.70','演唱/么健'],
        ['26.20','你从江南雨巷里走来'],
        ['32.71','柔柔春风亲吻你裙摆'],
        ['40.95','小桥流水乌篷船的桨声'],
        ['50.21','醉了醒了那沉静楼台'],
        ['58.45','你从如诗画卷里走来'],
        ['64.96','嘈嘈切切琴音落玉盘'],
        ['74.46','丝丝缕缕吴侬细语呢喃'],
        ['82.70','羞了含苞待放的那朵莲'],
        ['90.70','俏丽的身影起舞翩翩'],
        ['98.95','芳华逝去你却妩媚依然'],
        ['106.70','倩影倒映在平静的湖面'],
        ['113.71','怎叫人不为你顾盼迷恋'],
        ['122.95','油纸伞下清丽旖旎诗行'],
        ['130.45','石拱桥记忆着多少古往'],
        ['138.45','江南雨巷的平江府姑娘'],
        ['146.20','亭亭玉立宛在那水中央'],
        ['155.20','LRC字幕制作/翁奕童苑'],
        ['176.71','你从如诗画卷里走来'],
        ['184.45','嘈嘈切切琴音落玉盘'],
        ['191.45','丝丝缕缕吴侬细语呢喃'],
        ['200.71','羞了含苞待放的那朵莲'],
        ['208.20','俏丽的身影起舞翩翩'],
        ['216.46','芳华逝去你却妩媚依然'],
        ['224.70','倩影倒映在平静的湖面'],
        ['232.45','怎叫人不为你顾盼迷恋'],
        ['241.21','油纸伞下清丽旖旎诗行'],
        ['248.95','石拱桥记忆着多少古往'],
        ['256.46','江南雨巷的平江府姑娘'],
        ['264.45','亭亭玉立宛在那水中央'],
        ['272.95','油纸伞下清丽旖旎诗行'],
        ['280.96','石拱桥记忆着多少古往'],
        ['289.20','江南雨巷的平江府姑娘'],
        ['295.95','亭亭玉立宛在那水中央'],
        ['306.95','亭亭玉立宛在那水中央'],
        ['317.95','谢谢欣赏']
];
       
Array.from({length: 10}).forEach((ele,key) => {
        ele = document.createElement('span');
        ele.className = 'sskey';
        ele.style.left = key * 6 + key * 3 + 'px';
        ele.style.height = num(10,60) + 'px';
        ele.style.backgroundColor = `rgba(${num(0,255)},${num(0,255)},${num(0,255)},.95)`;
        wrap.appendChild(ele);
})

let sskey = document.querySelectorAll('.sskey');

mama.onclick = () => aud.paused ? aud.play() : aud.pause();

aud.addEventListener('timeupdate', () => {
        Array.from(sskey).forEach((ele) => {
                ele.style.height = num(10, 60) + 'px';
        })
        meter.value = prog(aud.duration, aud.currentTime);
                let tt = aud.currentTime;
        for(j=0; j<lrcAr.length; j++){
                if(tt >= lrcAr - slip){
                        lrcbox.innerHTML = lrcAr;
                }
        }
});

let timer = setInterval(() => {
        idx ++;
        if(idx >= picAr.length) idx = 0;
        picbox.src = picAr;
        flag ? (picbox.style.animation = 'fadein .8s', flag = false) : (picbox.style.animation = 'fadeout .8s', flag = true);
}, 10000);

</script>



红影 发表于 2022-6-21 10:54

制作漂亮，翁奕童苑真棒{:4_199:}

红影 发表于 2022-6-21 10:55

代码里可能有点问题，让论坛边框有点变形呢{:4_204:}

红影 发表于 2022-6-21 10:57

去帖子里看了一下，应该是代码结束的地方多了</td></tr></table>

东篱闲人 发表于 2022-6-21 11:01

这个切换确实漂亮！{:5_116:}

红影 发表于 2022-6-21 14:14

现在好了， 给翁奕童苑点赞{:4_199:}

走过岁月 发表于 2022-6-21 15:14

做得真不错，谢谢老师，期待更多精彩作品

走过岁月 发表于 2022-6-21 15:15

音乐很好听 {:4_190:}
页: [1]
查看完整版本: 《雨巷佳人》演唱/么健