|
|
楼主 |
发表于 2024-1-14 11:32:00
|
显示全部楼层
IP:湖北武汉
1 外面加了个壳， 和里面的一样大
<div style="width:1168px;height:640px;position:absolute;margin:150px -200px;z-index:99999;">
2. 末尾加了 <div style="width:100%;height:960px;position:relative;"></div> 避免下面按钮被遮挡住。
代码附后
- <style>
- #papa {
- width: 100%;
- height: 100%;
- background:#000000 url('https://')no-repeat center / cover;
- box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #DC143C;
- position: relative;overflow: hidden;
- z-index: 12345;
- }
- #vid { position: absolute; width: 50%; height: 50%; top:12.5%; left:49%;object-fit: cover; pointer-events: none; opacity: 1;z-index: 1;-webkit-mask-image: radial-gra**nt(black 25% ,transparent 70%); }
- #dt{position: absolute;top:0%; left:0%;width: 100%;height:100%;z-index:-1;}
- #papa:hover #mplayer { transition: .7s; opacity: .9; }
- #mplayer {z-index: 80;
- position: absolute;
- top:94.5%; left:50.5%;
- bottom: 25px;
- width: 20px;
- height: 15px;background:#333333;
- border: 0px solid #000000;
- border-radius: 20%;
- opacity: 1;
- transition: .7s;
- display: grid;
- place-items: center;
- --disp1: 0; --disp2: 1;
- }
- #mplayer::before, #mplayer::after {
- position: absolute;
- content: '';
- border-style: solid;
- border-color: #ffffff;
- cursor: pointer;
- transition: .4s;
- }
- #mplayer::before {
- width: 0;
- height: 0;
- left: 6px;
- border-width: 5px 8px;
- border-color: transparent transparent transparent #ffffff;
- opacity: var(--disp1);
- }
- #mplayer::after {
- width: 1px;
- height: 10px;
- border-width: 0 2px 0 2px;
- opacity: var(--disp2);
- }
- @keyframes opa { to {opacity: 1;} }
- #tmsg {position: absolute;z-index: 91;
- font: normal 10px sans-serif;
- color: #00ff00;
- top:68%;
- left:24%;}
- #prog {position: absolute;z-index: 91;
- width: 9%;
- height: 0.6%;
- cursor: pointer;
- top:92.4%;
- box-shadow: 0px 0px 1px 1px #cccccc;
- left:47%;border-radius: 0px;}
- #musickrc{width:45%;line-height:30px;position: absolute;position: absolute;left:50%;top:65%;z-index: 11;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px 0);}
- #musickrc span {display:block;text-align:center; }
- #bt{ width: 15%; height: 50px; color: #ffffff; position: absolute; left:46%;top:78%; font-size: 12px; font-family:仿宋;z-index: 21; }
- </style>
- <div id="outBlk" style="width:1168px;height:640px;position:absolute;margin:150px -200px;z-index:99999;">
- <div id="papa">
- <div id="dt"><img id="Img" src="http://chuangshicdn.data.mvbox.cn/album/24/01/08/24010814022029905152.gif" width="100%" height="100%"></div>
- <video id="vid" src="https://www.kumeiwp.com/sub/filestores/2024/01/07/3e99e4046e8213665e359900e82b002b.mp4" muted autoplay loop></video>
- <div id="tmsg">00:00 | 00:00</div>
- <div id="prog"></div>
- <div id="mplayer"></div>
- <div id="musickrc" >
- <p id="musickrc01"style="color:#880000; text-align:left;font-weight: ;font-family:华文隶书;font-size: 30px;" ></P>
- <P id="musickrc02"style="color:#000080;text-align:right;font-weight: ;font-family:华文隶书;font-size: 30px;"></P>
- </div>
- <div id="bt">爱到天荒地老 - 唐艺</div>
- </div>
- <audio id="aud" src="https://www.qqmc.com/mp3/music285455251.mp3" loop autoplay></audio>
- </div>
- <div style="width:100%;height:960px;position:relative;"></div>
- <script >
- var songkrc =`[00:00]走心入梦的人(DJ 默涵版）
- [00:04]作词：金艾娜
- [00:08]作曲：钰柃
- [00:13]演唱：金艾娜
- [00:17]如果没有一往情深
- [00:20]怎会懂得缘分捉弄人
- [00:24]我把你的情当了真
- [00:28]只想与你牵手在红尘
- [00:32]一颗心早为你失了魂
- [00:36]也曾为你把爱封存
- [00:39]看到你含情的眼神
- [00:43]好想给你一个拥吻
- [00:47]走了心入了梦的人
- [00:51]原来爱得如此认真
- [00:54]明知道相思扰乱心神
- [00:58]偏偏坠入相思门
- [01:02]走了心入了梦的人
- [01:06]可知我愿为你倾心
- [01:09]我相信爱能感天动地
- [01:13]缘分注定我们的今生
- [01:32]如果没有一往情深
- [01:36]怎会懂得缘分捉弄人
- [01:39]我把你的情当了真
- [01:43]只想与你牵手在红尘
- [01:47]一颗心早为你失了魂
- [01:51]也曾为你把爱封存
- [01:54]看到你含情的眼神
- [01:58]好想给你一个拥吻
- [02:02]走了心入了梦的人
- [02:06]原来爱得如此认真
- [02:09]明知道相思扰乱心神
- [02:13]偏偏坠入相思门
- [02:17]走了心入了梦的人
- [02:21]可知我愿为你倾心
- [02:24]我相信爱能感天动地
- [02:28]缘分注定我们的今生
- [02:32]如果没有一往情深
- [02:36]怎会懂得缘分捉弄人
- [02:39]我把你的情当了真
- [02:43]只想与你牵手在红尘
- [02:47]一颗心早为你失了魂
- [02:51]也曾为你把爱封存
- [02:54]看到你含情的眼神
- [02:58]好想给你一个拥吻
- [03:02]走了心入了梦的人
- [03:06]原来爱得如此认真
- [03:09]明知道相思扰乱心神
- [03:13]偏偏坠入相思门
- [03:17]走了心入了梦的人
- [03:21]可知我愿为你倾心
- [03:24]我相信爱能感天动地
- [03:28]缘分注定我们的今生
- [03:32]我相信爱能感天动地
- [03:36]缘分注定我们的今生
- `;
- function parseLyric(text) { var lines = text.split(/\r|\n|\r\n/),pattern = /\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,2}:\d{2}\]/g,result = []; while (!pattern.test(lines[0])) {lines = lines.slice(1); }; lines[lines.length - 1].length === 0 && lines.pop(); lines.forEach(function(v,i,a) { var time = v.match(pattern), value = v.replace(pattern,''); time.forEach(function(v1,i1,a1){ var t = v1.slice(1, -1).split(/:/); result.push([parseInt(t[0],10) * 60 + parseFloat(t[1]), value]); }); }); result.sort(function(a, b){ return a[0] - b[0];}); return result;}
- var my_audio =document.getElementById("aud");var lyric = parseLyric(songkrc); my_audio.ontimeupdate = function () { for (var i = 0; i < lyric.length; i++) { if(this.currentTime > lyric[i][0]){ document.getElementById("musickrc01").innerHTML = lyric[i][1]; if(i+1==lyric.length){ document.getElementById("musickrc01").innerHTML = ""; }else{ document.getElementById("musickrc02").innerHTML = lyric[i + 1][1];};};};}; my_audio.play();
- /*暂停 播放按钮*/
- (function(){let mState = () => aud.paused ? (mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0')) : (mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'));
- mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
- aud.addEventListener('play', () => mState());
- aud.addEventListener('pause', () => mState());
- })();
- /*结束*/
- /*进度条 进度时间*/
- prog.onclick = (e) => {
- aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
- }
- aud.addEventListener('timeupdate', () => {
- aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gra**nt(90deg, #00ff00, #00ff00, #00ff00 ' + aud.currentTime / aud.duration * 100 + '%, #333333 0)';});
- tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
- });
- let toMin = (val) => {
- if (!val) return '00:00';
- val = Math.floor(val);
- let min = parseInt(val / 60),
- sec = parseFloat(val % 60);
- if (min < 10) min = '0' + min;
- if (sec < 10) sec = '0' + sec;
- return min + ':' + sec;
- };
- /*结束*/
- </script>
- <script>
- if ('getContext' in document.createElement('canvas')) {
- HTMLImageElement.prototype.play = function() {
- if (this.storeCanvas) {
- // 移除存储的canvas
- this.storeCanvas.parentElement.removeChild(this.storeCanvas);
- this.storeCanvas = null;
- // 透明度还原
- image.style.opacity = '';
- }
- if (this.storeUrl) {
- this.src = this.storeUrl;
- }
- };
- HTMLImageElement.prototype.stop = function() {
- var canvas = document.createElement('canvas');
- // 尺寸
- var width = this.width, height = this.height;
- if (width && height) {
- // 存储之前的地址
- if (!this.storeUrl) {
- this.storeUrl = this.src;
- }
- // canvas大小
- canvas.width = width;
- canvas.height = height;
- // 绘制图片帧（第一帧）
- canvas.getContext('2d').drawImage(this, 0, 0, width, height);
- // 重置当前图片
- try {
- this.src = canvas.toDataURL("image/gif");
- } catch(e) {
- // 跨域
- this.removeAttribute('src');
- // 载入canvas元素
- canvas.style.position = 'absolute';
- // 前面插入图片
- this.parentElement.insertBefore(canvas, this);
- // 隐藏原图
- this.style.opacity = '0';
- // 存储canvas
- this.storeCanvas = canvas;
- }
- }
- };
- }
- vid=document.querySelector('#vid');
- var image= document.getElementById("Img");
- mplayer.onclick =function() { aud.paused ? (image.stop(),vid.pause()):(image.play(),vid.play())};
- </script>
|
|
发表于 2024-1-14 10:24:09
发表于 2024-1-14 10:45:18
发表于 2024-1-14 10:51:09
