|
发表于 2024-6-25 18:27:12
|
显示全部楼层
IP:河北廊坊
老谟,上面是我调整的,把向左调整为0就好了。
- <div style="width: 100%;height: 1050px;position: absolute;MARGIN-LEFT:0px;MARGIN-top:50px;">
- <style>
- #tz { margin: 30px 0 30px calc(40% - 700px); width: 1400px; height: 800px; background: url('https://sirius.130014.xyz/2024/06/18/3-220929163459_.jpg') no-repeat center/cover; box-shadow: 2px 2px 6px gray; overflow: hidden; position: relative; }
- #lrc { position: absolute; left: 120px; top: 715px; font: normal 40px sans-serif; white-space: nowrap; color: Yellow; text-shadow: 1px 1px 1px gray; animation: fly 20s linear infinite alternate var(--state); --ww: 350px; }
- #player { position: absolute;top: 680px; left: calc(58% - 140px); bottom: 20px; width: 280px; height:10px; background: linear-gra**nt(to right, var(--color) var(--prg), transparent 0); border: 1px solid var(--color); border-radius: 6px; display: grid; place-items: center; --color: green; --prg: 0%; --btnSize: 50px;}
- #player::before, #player::after { position: absolute; content: ''; }
- #player::before { width: var(--btnSize); height: var(--btnSize); top: calc(#FFA500 * -1 - 5px); background: url('https://pic.imgdb.cn/item/666c48a7d9c307b7e9370e89.png') no-repeat center/cover; filter: hue-rotate(180deg); animation: rot 6s linear infinite var(--state);}
- #player::after { content: attr(data-time); inset: -30px 0 10px 0; text-align: justify; text-align-last: justify; font-size: 14px; color: #FFA500; pointer-events: none; }
- .vid { position: absolute; bottom: 0; width: 100%; height: calc(100% + 60px); 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=321939" autoplay loop></audio>
- <video class="vid" src="https://img.tukuppt.com/video_show/15653652/00/80/83/60d04564c32f7.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[lrcKey][1];
- 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[j][0]) {
- 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[lrcKey][0]) 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 = [['22.44','在江南绵绵的雨季里'],
- ['27.49','飘洒着濛濛的细雨'],
- ['32.58','如烟的杨柳在雨中沐浴'],
- ['38.43','杨柳缠绵雨的情意'],
- ['42.97','在青石铺就的街巷里'],
- ['48.30','流淌着道道的雨溪'],
- ['53.50','淡淡的炊烟在雨中升起'],
- ['59.80','夜雨沉醉春的旋律'],
- ['63.57','江南的雨柔柔的江南雨'],
- ['69.00','你用温情滋润着爱的春意'],
- ['74.40','江南的雨江南的秀丽'],
- ['79.72','一江春水梦幻迷离'],
- ['84.90','江南的雨柔柔的江南雨'],
- ['89.46','你用温情滋润着爱的春意'],
- ['94.67','江南的雨江南的秀丽'],
- ['100.22','一江春水梦幻迷离'],
- ['125.75','在江南绵绵的雨季里'],
- ['130.64','飘洒着濛濛的细雨'],
- ['136.69','如烟的杨柳在雨中沐浴'],
- ['141.79','杨柳缠绵雨的情意'],
- ['147.09','在青石铺就的街巷里'],
- ['151.63','流淌着道道的雨溪'],
- ['156.57','淡淡的炊烟在雨中升起'],
- ['162.44','夜雨沉醉春的旋律'],
- ['166.99','江南的雨柔柔的江南雨'],
- ['171.93','你用温情滋润着爱的春意'],
- ['178.59','江南的雨江南的秀丽'],
- ['183.57','一江春水梦幻迷离'],
- ['187.48','江南的雨柔柔的江南雨'],
- ['192.58','你用温情滋润着爱的春意'],
- ['198.50','江南的雨江南的秀丽'],
- ['203.67','一江春水梦幻迷离'],
- ['208.26','江南的雨江南的秀丽'],
- ['214.70','一江春水梦幻迷离']
- ];
- </script>
- </div>
- <div style="width: 100%;height: 980px;"> </div>
- <p> </p>
- <p> </p>
- <p> </p>
- <p> </p>
- <p> </p>
- <p> </p>
复制代码
|
|