本帖最后由 起个网名好难 于 2024-1-24 22:58 编辑 <br /><br />红影 发表于 2024-1-24 21:11
我试了一下，歌词无法出来啊，按钮也不动
<style>
#mydiv { position: relative; margin: 70px 0 0 calc(50% - 561px); width: 960px; height: 600px; background: url('https://pic.imgdb.cn/item/65b07c1b871b83018a1e8a09.jpg') no-repeat center/cover; box-shadow: 4px 4px 12px #333; overflow: hidden; cursor:pointer; --x0: 0; }
#mydiv::before { position: absolute; left:10px; top: 30px;content: ''; width: 693px; height: 390px; background: url('https://pic.imgdb.cn/item/65b07c60871b83018a1f3e37.jpg') no-repeat center/cover; mix-blend-mode: luminosity;
clip-path: polygon(0 var(--x0), calc(var(--x0) * 2) 0, 100% var(--x0), 100% calc(100% - var(--x0)), calc(var(--x0) * 2) 100%,0 calc(100% - var(--x0))); transition: all .6s; }
#mydiv:hover::before { mix-blend-mode: unset; transform: scale(.6) translate(-220px,-160px); }
#vid { position: absolute; width: 100%; height: 100%; object-fit: fill; mix-blend-mode: screen; clip-path: polygon(0 0, 80% 0, 100% 20%, 100% 100%, 0 100%); pointer-events: none; }
.lrcShow{font:bold 3em 楷体,楷体_GB2312;position:absolute;width:80%;height:2em;bottom:0px;left:20%;color:hsl(0,20%,80%);filter:drop-shadow(1px 1px 1px white);letter-spacing:2px;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;cursor:pointer;}.lrcShow::before{position:absolute;content:attr(data-lrc);width:0;height:100%;left:0;top:0;color:transparent;color:darkred; background-image:linear-gradient(60deg,hsl(0,100%,50%),hsl(60,100%,50%),hsl(120,100%,50%),hsl(180,100%,50%),hsl(240,100%,90%));-webkit-background-clip:text;overflow:hidden;white-space:nowrap;animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);}@keyframes bgMove1{from{width:0;}to{width:100%;}}@keyframes bgMove0{from{width:0;}to{width:100%;}}
.lrcShow::before{color:transparent;background-image:url(https://z4a.net/images/2024/01/14/auewj-fb7cv.jpg);}
</style>
<div id="mydiv" title="播放/暂停">
<!-- audio id="aud" src="https://music.163.com/song/media/outer/url?id=1855978221" autoplay loop></audio -->
<video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/25/51/62417fd483ea3.mp4" loop></video>
<div class="lrcShow" data-lrc="点击启动播放">
</div></div>
<script>
{
let lrcPlayerY=function(){return this.init.apply(this,arguments)};lrcPlayerY.prototype={constructor:lrcPlayerY,init:function(opts){lyricTxt=opts.lrcTxt.replace(/(^\s*)|(\s*$)/g,'');this.audioCtrl=document.getElementById(opts.audioCtrl);this.lrcShowObj=document.querySelector('.lrcShow');this.lrcVec=this.handleLrc(lyricTxt);this.genPlayer(opts.audioURL)},handleLrc:function(lyricTxt){var parts=lyricTxt.replace(/(^\s*)|(\s*$)/g,"").split(/\r|\n|\r\n/);let lrcs=new Array();for(let index=0;index<parts.length;index++){let chkTime=parts.match(/\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,2}:\d{2}\]/g);if(chkTime){tIdx=parts.lastIndexOf(']');if(tIdx>0)lrcTxt=parts.substr(tIdx+1);for(m=0;m<chkTime.length;m++){ta=chkTime.substr(1).replace(']','').split(/:/);_0=(+ta)*60+(+ta);if(lrcs.length==0&&_0!=0){lrcs.push({seconds:0,words:'\u00A9\u0020\u0020\u4e5f\u66fe\u5e74\u8f7b'})}lrcs.push({seconds:_0,words:lrcTxt})}}}return lrcs.sort(function(a,b){return(a.seconds-b.seconds)})},showLrc:function(durTime){this.lrcShowObj.innerHTML=this.lrcShowObj.dataset.lrc=this.lrcVec.words;this.lrcShowObj.style.setProperty('--aniName','bgMove'+(this.idx%2));this.lrcShowObj.style.setProperty('--durTime',durTime+'ms');this.lrcShowObj.style.setProperty('--aniPlayState','running');this.idx++},genPlayer:function(mUrl){this.mObj=document.createElement("audio");this.mObj.loop=false;this.mObj.muted=false;this.mObj.autoplay=true;this.mObj.src=mUrl;this.lrcShowObj.appendChild(this.mObj);var that=this;var turn=0;this.idx=0;this.mObj.addEventListener('ended',function(){that.idx=0;this.play()});this.mObj.addEventListener('play',function(){that.lrcShowObj.style.setProperty('--aniPlayState','running')});this.mObj.addEventListener('pause',function(){if(that.idx==1&&this.currentTime<1){that.mObj.play();return false}that.lrcShowObj.style.setProperty('--aniPlayState','paused')});this.mObj.addEventListener('error',function(){console.log("audio wrong, remove play start event");that.lrcShowObj.style.display='none';that.lrcShowObj.removeChild(this)});this.mObj.addEventListener('timeupdate',function(){if(that.idx<that.lrcVec.length){if(this.currentTime>=that.lrcVec.seconds){if(that.idx<(that.lrcVec.length-1)){that.showLrc((that.lrcVec.seconds-that.lrcVec.seconds)*950)}else{that.showLrc((this.duration-that.lrcVec.seconds)*950)}}}});this.lrcShowObj.addEventListener('click',function(){if(that.mObj.paused){that.mObj.play()}else{that.mObj.pause()}})}}
let lrctxt = `
情狐 - 花僮 (Ruby)
词：张北北
曲：张北北
编曲：王中易/高胜
混音：王中易/高胜
母带：李飞
千年的等待
只为今世的遇见
红尘中的回眸
是落寞的起点
修炼几千年
深藏几许的情缘
尘世度劫只为
凝心中的莲
我是千年的狐仙
化身转世等情缘
一颦一笑炫秋水
一姿一态醉春山
我是千年的狐仙
陷入红尘的执念
一场素来的无缘
愿做佛前一只莲
千年的等待
只为今世的遇见
红尘中的回眸
是落寞的起点
修炼几千年
深藏几许的情缘
尘世度劫只为
凝心中的莲
我是千年的狐仙
化身转世等情缘
一颦一笑炫秋水
一姿一态醉春山
我是千年的狐仙
陷入红尘的执念
一场素来的无缘
愿做佛前一只莲
我是千年的狐仙
化身转世等情缘
一颦一笑炫秋水
一姿一态醉春山
我是千年的狐仙
陷入红尘的执念
一场素来的无缘
愿做佛前一只莲
`;
//
let opts = {
lrcTxt:lrctxt,
audioURL:"https://mp3.t57.cn:7087/kwlink_d.php?id=25249088",
}
let lrcPlayer = new lrcPlayerY(opts);
/***---------------------------------------------------------****/
let step = 1, x0 = 0; // , change = true;
let mState = () => lrcPlayer.mObj.paused ? vid.pause() : vid.play();
/**let clipBg = () => {
if(!change) return;
x0 += step;
if(x0 > 100 || x0 < 0) {
step = -step;
change = false;
setTimeout( () => change = true, 2000);
}
mydiv.style.setProperty('--x0', x0 + '%');
};**/
setInterval(() => {
if(!lrcPlayer.mObj.paused) {
x0 += step;
if(x0 > 100 || x0 < 0) {
step = -step;
//change = false;
}
mydiv.style.setProperty('--x0', x0 + '%');
}
},200);
mydiv.addEventListener('click', mState, false);
//aud.addEventListener('playing', mState, false);
//aud.addEventListener('pause', mState, false);
//aud.addEventListener('timeupdate', clipBg, false);
}
</script>
感觉真的跟不上了啊
红影 发表于 2024-1-24 21:18
两性的差异决定的啊，为博美人一笑，男人可以倾家荡产甚至江山都不要了。可美男呢，想想潘安那么帅，喜欢 ...
现在可是不一样了，你看各种社交软件上，电视上，小鲜肉是多么吃香呀{:4_189:}
红影 发表于 2024-1-24 21:19
时间本来就是要费掉的啊，否则留着也是浪费
我可是不能坐太久的人呢。
马黑黑 发表于 2024-1-24 22:30
那就是JS没有组织好，这里面有些时候还是需要技巧的
嗯嗯，今天有点忙，什么都来不及了{:4_173:}
起个网名好难 发表于 2024-1-24 22:53
本帖最后由 起个网名好难 于 2024-1-24 22:58 编辑
太好了，难难加上歌词了，太感谢了，我得好好看看学习一下{:4_199:}
绿叶清舟 发表于 2024-1-25 12:38
感觉真的跟不上了啊
清舟来了，看到你太开心了。搬到新装修的家里么。在新房子里过年，这感觉太好了。
清舟真会享受生活啊{:4_187:}
樵歌 发表于 2024-1-25 19:11
现在可是不一样了，你看各种社交软件上，电视上，小鲜肉是多么吃香呀
哈哈，小鲜肉已经不算男人了，只能算中性人{:4_173:}
樵歌 发表于 2024-1-25 19:14
我可是不能坐太久的人呢。
嗯嗯，师兄说得对，身体还是要十分小心着才好{:4_187:}
红影 发表于 2024-1-25 22:29
嗯嗯，今天有点忙，什么都来不及了
不急慢慢来
马黑黑 发表于 2024-1-25 22:33
不急慢慢来
嗯嗯，只能这样了。
红影 发表于 2024-1-25 23:24
嗯嗯，只能这样了。
其实简单的：要把JS代码放入 onload 代码块内，可以放在设置完插件之后
马黑黑 发表于 2024-1-25 23:49
其实简单的：要把JS代码放入 onload 代码块内，可以放在设置完插件之后
我不会呢，去搜了一下，是这样么
window.onload = function() {
var script = document.createElement("script");
script.src = "your_script.js";
document.head.appendChild(script);
}
红影 发表于 2024-1-26 10:35
我不会呢，去搜了一下，是这样么
window.onload = function() {
var script = document.createElemen ...
是的。帖子需要用到的JS代码，放在 最后一个 } 的上面看看
马黑黑 发表于 2024-1-26 12:50
是的。帖子需要用到的JS代码，放在 最后一个 } 的上面看看
还是不行，我肯定是什么地方弄得不对{:4_201:}
红影 发表于 2024-1-25 22:32
哈哈，小鲜肉已经不算男人了，只能算中性人
也不错呢，两面都讨好，只是俺们讨厌。{:4_189:}
红影 发表于 2024-1-25 22:32
嗯嗯，师兄说得对，身体还是要十分小心着才好
是呀。我很小心呢。
红影 发表于 2024-1-26 15:49
还是不行，我肯定是什么地方弄得不对
应该是
樵歌 发表于 2024-1-26 15:57
也不错呢，两面都讨好，只是俺们讨厌。
这些人也就卖的脸蛋，等年老色衰就没人理了。
樵歌 发表于 2024-1-26 15:58
是呀。我很小心呢。
嗯嗯，这样最好{:4_204:}