【东篱音画】相见欢

东篱闲人 发表于 2024-6-16 11:07

本帖最后由东篱闲人于 2024-6-16 13:36 编辑 <br /><br /><style>
#tz { margin: 30px 0 30px calc(50% - 781px); width: 1400px; height: 800px; background: url('https://pic.imgdb.cn/item/666e4e21d9c307b7e96b1d98.jpg') no-repeat center/cover; box-shadow: 2px 2px 6px gray; overflow: hidden; position: relative; }
#lrc { position: absolute; left: 120px; top: 650px; font: normal 25px sans-serif; white-space: nowrap; color:#EEE8CD; celandine green; text-shadow: 1px 1px 1px gray; animation: fly 20s linear infinite alternate var(--state); --ww: 350px; }

#player::after { content: attr(data-time); inset: -30px 0 10px 0; text-align: justify; text-align-last: justify; font-size: 14px; color: var(--color); pointer-events: none; }
.vid { position: absolute; bottom: 0; width: 100%; height: calc(70% + 40px); object-fit: cover; mix-blend-mode: screen; pointer-events: none; }
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes fly { to { left: calc(100% - var(--ww) - 20px); } }
</style>

<div id="tz">
   <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1491761712" autoplay loop></audio>
   <video class="vid" src="https://img.tukuppt.com/video_show/2269348/00/17/44/5ec495391393a.mp4" autoplay loop muted></video>
   <div id="lrc">相见欢</div>
   <div id="player" data-time="00:00 00:00"></div>
</div>

<script>
var vids = document.querySelectorAll('.vid');
var btnSize = parseInt(window.getComputedStyle(player).getPropertyValue('--btnSize'));

var lrcKey = 0;

var showLrc = () => {
   if(lrcKey >= lrcAr.length) return false;
   lrc.innerText = lrcAr;
   lrc.style.setProperty('--ww', lrc.offsetWidth + 'px');
   lrcKey ++;
};

var mState = () => {
   tz.style.setProperty('--state',['running','paused'][+aud.paused]);
   if(vids.length > 0) vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
};

var s2m = (s) => (Math.floor(s / 60)).toString().padStart(2, '0') + ':' + (Math.floor(s % 60)).toString().padStart(2, '0');

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

aud.onseeked = () => {
   for(var j = 0; j < lrcAr.length; j ++) {
            if(aud.currentTime < lrcAr) {
                     lrcKey = j - 1;
                     if(lrcKey < 0) lrcKey = 0;
                     break;
            }
   }
};

aud.ontimeupdate = () => {
   player.style.setProperty('--prg', (aud.currentTime / aud.duration * 100 || 0) + '%');
   player.dataset.time = s2m(aud.currentTime) + ' ' + s2m(aud.duration);
   if(lrcKey <= lrcAr.length - 1 && aud.currentTime >= lrcAr) showLrc();
}

player.onclick = (e) => {
   if(e.offsetY > 0) aud.currentTime = aud.duration * e.offsetX / player.offsetWidth;
   if(e.offsetY < 0 && e.offsetX > player.offsetWidth / 2 - btnSize / 2 && e.offsetX < player.offsetWidth / 2 + btnSize / 2) aud.paused ? aud.play() : aud.pause();
}

player.onmousemove = (e) => {
   if(e.offsetY < 0) {
            if(e.offsetX > player.offsetWidth / 2 - btnSize / 2 && e.offsetX < player.offsetWidth / 2 + btnSize / 2) {
                     player.title = aud.paused ? '播放' : '暂停';
                     player.style.cursor = 'pointer';
            }
   }else{
            player.title = '调节进度';
            player.style.cursor = 'pointer';
   }
};

var lrcAr = [['0.00','作词 : 无'],
['0.30','作曲 : 无'],
['0.61','林花谢了春红'],
['4.36','原曲：雨碎江南·印象'],
['9.36','作曲：河图'],
['12.86','编曲：丢子'],
['17.85','策划：顾银影'],
['21.10','填词：枫琉，杏绫，凉芜'],
['24.11','演唱：若愚不是鱼，Rainin雨泞'],
['27.11','题字：Kevin Lau'],
['30.36','美工：挽衾'],
['33.35','后期：CAGY'],
['36.60','【鱼玄机】若愚不是鱼（词：杏绫）'],
['42.11','情色乱初经人事前程漫'],
['48.85','入骨相思泪眼阑珊花月无人看'],
['54.52','左眼红尘斩断右手云雨赴鸾'],
['60.77','香消玉殒(空)悲转凄婉'],
['66.02','【薛涛】Rainin雨泞（词：枫琉）'],
['66.77','望江楼桃花笺'],
['72.77','愿共为池上鸟同心戏莲间'],
['79.27','蒹葭夜含霜山色共苍苍鸳鸯未双'],
['90.27','【合唱】（词：枫琉）'],
['92.28','有谁怜尘封光阴里面'],
['98.27','林花谢春红'],
['101.52','终是匆匆一生心事几人懂'],
['106.26','嬉笑怒骂遭口诛与笔伐'],
['111.27','便皓首穷经'],
['114.02','咏絮之才何曾参透一字情'],
['123.02','【杜十娘】若愚不是鱼（词：凉芜）'],
['124.27','渔火晚孤灯夜下更蹒跚'],
['131.02','面汤暖凉了又煨思量难决断'],
['136.26','郎啊干金不换风月情浓也淡'],
['142.76','江水送我去奈河忘川'],
['149.52','【柳如是】Rainin雨泞（词：凉芜）'],
['150.02','章台柳河东见我青山有'],
['156.26','烟火似覆水沉舟春来恨薄寒'],
['161.77','只怕黄昏月残这案锦帛误判'],
['168.27','留得那旧怨余韵漫漫'],
['174.02','（词：杏绫）'],
['174.26','Rainin雨泞：松山间'],
['177.51','若愚不是鱼：彩笺远'],
['180.26','合：纵身一跃断红尘青山春晚'],
['187.01','朝雨润花寒嫣然一笑灿尘封江南'],
['199.01','若愚不是鱼：执笔间含笑多少眷恋(Rainin：执笔间含笑多少眷恋)'],
['206.01','若愚不是鱼：落花消散却穿透流年(Rainin雨泞：消散却穿透流年)'],
['211.01','若愚不是鱼：释怀初见那一天(Rainin雨泞：遭口诛）'],
['214.01','无人可懂怪不得步生怨(Rainin雨泞：与笔伐无人懂)'],
['218.76','若愚不是鱼：在心间(Rainin雨泞：曾经远)'],
['224.01','Rainin雨泞：心事暗淡(若愚不是鱼：心事暗淡)']
];
</script>

红影发表于 2024-6-16 12:48

这个制作漂亮，东篱大哥的图图总是那么韵味十足。
欣赏东篱大哥好帖{:4_187:}

红影发表于 2024-6-16 12:49

图片居中还差点，#tz { margin: 30px 0 30px calc(50% - 700px); width: 1400px; height: 800px;这里的700应该取781，就居中了，用宽度一半加上81

东篱闲人 发表于 2024-6-16 13:35

红影发表于 2024-6-16 12:48
这个制作漂亮，东篱大哥的图图总是那么韵味十足。
欣赏东篱大哥好帖

{:4_176:}

东篱闲人 发表于 2024-6-16 13:36

红影发表于 2024-6-16 12:49
图片居中还差点，这里的700应该取781，就居中了，用宽度一半加上81

还真灵。。。{:4_189:}

红影发表于 2024-6-16 22:17

东篱闲人发表于 2024-6-16 13:35

谢美酒{:4_176:}

红影发表于 2024-6-16 22:17

东篱闲人发表于 2024-6-16 13:36
还真灵。。。

黑黑讲过很多次啊，东篱大哥没注意吧{:4_173:}

东篱闲人 发表于 2024-6-16 22:20

红影发表于 2024-6-16 22:17
黑黑讲过很多次啊，东篱大哥没注意吧

嗯嗯，没认真学习。。。{:5_103:}

梦江南 发表于 2024-6-17 08:13

非常漂亮！大赞！{:4_187:}

东篱闲人 发表于 2024-6-17 11:44

梦江南发表于 2024-6-17 08:13
非常漂亮！大赞！

江南喝茶。。。{:4_190:}

梦江南 发表于 2024-6-17 15:25

东篱闲人发表于 2024-6-17 11:44
江南喝茶。。。

老师，谢谢！

东篱闲人 发表于 2024-6-17 17:27

梦江南发表于 2024-6-17 15:25
老师，谢谢！

别老师老师的，咱不识字。。。。{:5_117:}

红影发表于 2024-6-17 17:49

东篱闲人发表于 2024-6-16 22:20
嗯嗯，没认真学习。。。

没事啊，现在知道了{:4_173:}

页: [1]

花潮论坛's Archiver

【东篱音画】相见欢