临摹马导“家乡的绿”✚文字✚歌词：就恋这把土

执著发表于 2024-4-12 21:44

本帖最后由执著于 2024-4-14 20:12 编辑 <br /><br /><style>
#papa { margin: 20px 0 20px calc(50% - 681px); width: 1200px; height: 796px; background: #f1f1f1 url('https://pic.imgdb.cn/item/6619300568eb935713c09055.jpg') no-repeat center/cover; box-shadow: 3px 4px 8px #000; overflow: hidden; z-index: 1; position: relative; --x: 0; --y: 0; }
#papa:hover #mplay { opacity: .7; }
#mplay { position: absolute; width: 120px; height: 120px; left: var(--x); top: var(--y); border: 1px solid #eee; border-radius: 50%; background: url('https://pic.imgdb.cn/item/6619300568eb935713c09055.jpg') no-repeat -10px -10px; opacity: 0; cursor: pointer; transition: 1s; animation: rot 5s linear infinite var(--state); }
#vid { position: absolute; left: 0; bottom: 0;width: 100%; height: calc(100% + 70px); object-fit: cover; mix-blend-mode: screen; pointer-events: none; }
@keyframes rot { to { transform: rotate(360deg); } }

.dText {
   position: absolute;
   transform: translate(-50%,-50%);
   left: 600px;
   top: 56px;
   width: 420px;
   font: 40px / 40px Sans-serif;
   color: #FF3366;
   text-shadow: 2px 2px 4px #888;
   animation: dance 2s ease-in-out infinite;
}
@keyframes dance {
to { font-weight: 900; font-style: italic; }
}

</style>

<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2123221935.mp3" loop autoplay></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2418175/00/18/94/5ef7a50c397ff.mp4" loop muted></video>
<div id="mplay"></div>
<div class="dText">
<p>湖南崀山-国家地质公园</p>
</div>

</div>

<script>
(function(lrcShow) {

let d_config = {
papa: '#papa',
btn: '#mplay',
lrcAr: [],
lrc_css: 'left: 10px; top: 10px;',
html_code: `<style>
#lrc { --motion: cover2; --tt: 1s; --bg: linear-gradient(180deg,hsla(100,10%,50%,.75),hsla(100,100%,20%,.65)); position: absolute; font: bold 2.4em sans-serif; color: hsl(100, 100%, 90%); white-space: pre; -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0, 100%, 0%, .85)); z-index: 900; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 0%; height: 100%; color: transparent; overflow: hidden; white-space: pre; background: var(--bg); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards var(--state); }
@keyframes cover1 { from { width: 0%; }to { width: 100%; } }
@keyframes cover2 { from { width: 0%; }to { width: 100%; } }
</style>
<div id="lrc" data-lrc="HcPlayer">HcPlayer</div>`,
};

let execLrc = (u_config) => {
let data = Object.assign({}, d_config, u_config);
let pabox = document.querySelector(data.papa);
pabox.innerHTML += data.html_code;
let btns = document.querySelectorAll(data.btn);
lrc.style.cssText += data.lrc_css;
let vids = document.querySelectorAll('video');
let elms = ;
let mKey = 0, mFlag = true;
let stateSetting = (elms,state,val) => elms.forEach(elm => elm.style.setProperty(state,val));
let vidplay = (vids,idx) => {
if(vids.length < 1) return;
[...vids].forEach(vid => {
idx ? vid.play() : vid.pause();
});
};
let showLrc = (time) => { let name = mFlag ? 'cover1' : 'cover2'; lrc.innerHTML = data.lrcAr; lrc.dataset.lrc = data.lrcAr.replace(/<br>/, '\n'); lrc.style.setProperty('--motion', name); lrc.style.setProperty('--tt', time + 's'); lrc.style.setProperty('--state', 'running'); mKey += 1; mFlag = !mFlag; };
let calcKey = () => { for (j = 0; j < data.lrcAr.length; j++) { if (aud.currentTime <= data.lrcAr) { mKey = j - 1; break; } } if (mKey < 0) mKey = 0; if (mKey > data.lrcAr.length - 1) mKey = data.lrcAr.length - 1; let time = data.lrcAr - (aud.currentTime - data.lrcAr); showLrc(time); };
let mState = () => {
aud.paused ? (stateSetting(elms,'--state','paused'),vidplay(vids,0)) : (stateSetting(elms,'--state','running'),vidplay(vids,1));
};
[...btns].forEach(btn => {
btn.onclick = () => aud.paused ? aud.play() : aud.pause();
});
aud.addEventListener('pause', () => mState());
aud.addEventListener('playing', () => mState());
aud.addEventListener('seeked', () => calcKey());
aud.addEventListener('timeupdate', () => {
for (let j = 0; j < data.lrcAr.length; j++) {
if (aud.currentTime >= data.lrcAr) {
if (mKey === j) showLrc(data.lrcAr);
else continue;
}
}
});
};

lrcShow.LRC = execLrc;

})(this);

let geci = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,

];

LRC({
papa: '#papa',
lrcAr: geci,
btn: '.mplay',
lrc_css: 'left: 50%; transform: translate(-50%); bottom: 30px;',
});

papa.onmousemove = (e) => {
   if(e.target.id === 'mplay') return;
   var x = e.offsetX, y = e.offsetY;
   if(x < 60) x = 60;
   if(x > papa.offsetWidth - 60) x = papa.offsetWidth - 60;
   if(y < 60) y = 60;
   if(y > papa.offsetHeight - 60) y = papa.offsetHeight - 60;
   papa.style.setProperty('--x', `${x - 60}px`);
   papa.style.setProperty('--y', `${y - 60}px`);
   mplay.style.backgroundPosition = `-${x - 60}px -${y - 60}px`;
};

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

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

var mState = () => aud.paused ?
   (papa.style.setProperty('--state', 'paused'), vid.pause()) :
   (papa.style.setProperty('--state', 'running'), vid.play());


</script>

小辣椒 发表于 2024-4-12 22:43

沙发坐上，慢慢欣赏

小辣椒 发表于 2024-4-12 22:44

欣赏执著的好制作，美了，美了{:4_199:}

执著发表于 2024-4-12 22:47

小辣椒发表于 2024-4-12 22:44
欣赏执著的好制作，美了，美了

谢谢老师鼓励哈！{:4_204:}

红影发表于 2024-4-12 22:58

这个做得漂亮，给执著点赞{:4_187:}

红影发表于 2024-4-12 22:59

这个貌似播放器的小图和底图不是完全对应呢，可能尺寸里的问题吧{:4_173:}

执著发表于 2024-4-12 23:54

红影发表于 2024-4-12 22:59
这个貌似播放器的小图和底图不是完全对应呢，可能尺寸里的问题吧

我也没搞清楚是什么原因：#papa { margin: 20px 0 20px calc(50% - 681px); width: 1200px; height: 796px;

红影发表于 2024-4-13 12:39

执著发表于 2024-4-12 23:54
我也没搞清楚是什么原因：#papa { margin: 20px 0 20px calc(50% - 681px); width: 1200px; height: 796p ...

去看了一下，你的播放器按钮不是用的底图呢，怪不得{:4_173:}

执著发表于 2024-4-13 17:10

红影发表于 2024-4-13 12:39
去看了一下，你的播放器按钮不是用的底图呢，怪不得

是不是由于歌词插件的设置原因？那是不是没办法改了？我好像弄不来了

红影发表于 2024-4-14 00:08

执著发表于 2024-4-13 17:10
是不是由于歌词插件的设置原因？那是不是没办法改了？我好像弄不来了

和歌词无关啊，你底图和播放器用了两张图，用同一张就可以了。

执著发表于 2024-4-14 10:57

红影发表于 2024-4-14 00:08
和歌词无关啊，你底图和播放器用了两张图，用同一张就可以了。

是我粗心大意了，背景图我修改了，但是忘记更改播放器按钮图片地址了，现在又出现新问题了：为什么该的按钮图片地址，原来用以点缀修饰的mp4却变成了这样的了。是怎么回事啊，如何弄？谢谢！

红影发表于 2024-4-14 17:28

执著发表于 2024-4-14 10:57
是我粗心大意了，背景图我修改了，但是忘记更改播放器按钮图片地址了，现在又出现新问题了：为什么该的按 ...

你确定你只改了按钮图片么？现在看不到按钮里的内容啊。
视频变这样就是原视频，视频的设置没用上的缘故。为什么没用上，我也看不出原因呢。

红影发表于 2024-4-14 17:35

看了一下，歌词里js代码里也有按钮和视频设置呢，和css里的设置冲突了？{:4_203:}

执著发表于 2024-4-14 18:39

红影发表于 2024-4-14 17:35
看了一下，歌词里js代码里也有按钮和视频设置呢，和css里的设置冲突了？

我仅仅更换了播放图片地址啊，这个怎么办？救救我啊！

红影发表于 2024-4-14 19:42

执著发表于 2024-4-14 18:39
我仅仅更换了播放图片地址啊，这个怎么办？救救我啊！

你再换回原来的图图试试看，如果不能回到原来状态，说明别的也动过了呢。

红影发表于 2024-4-14 19:44

按钮里的background: url('https://pic.imgdb.cn/item/6619300568eb935713c09055.jpg'')
好像后面多了个单引号？

执著发表于 2024-4-14 20:14

红影发表于 2024-4-14 19:44
按钮里的background: url('https://pic.imgdb.cn/item/6619300568eb935713c09055.jpg'')
好像后面多了个单 ...

哈哈哈哈哈，还是老师你厉害！细心！谢谢你{:4_204:}{:4_190:}

执著发表于 2024-4-14 20:20

红影发表于 2024-4-14 19:44
按钮里的background: url('https://pic.imgdb.cn/item/6619300568eb935713c09055.jpg'')
好像后面多了个单 ...

老师，你可以协助警方搞破案，什么蛛丝马迹都逃不过你的慧眼，老厉害了啊{:4_204:}

红影发表于 2024-4-14 21:43

执著发表于 2024-4-14 20:14
哈哈哈哈哈，还是老师你厉害！细心！谢谢你

主要是看不出来什么地方错了。你又说只是换了图片，就去仔细看了看图片{:4_173:}

红影发表于 2024-4-14 21:44

执著发表于 2024-4-14 20:20
老师，你可以协助警方搞破案，什么蛛丝马迹都逃不过你的慧眼，老厉害了啊

估计你复制的时候没注意，这个谁都可能发生呢。没什么大不了的{:4_204:}

页: [1]

花潮论坛's Archiver

临摹马导“家乡的绿”✚文字✚歌词：就恋这把土