窗外 - 音乐沙龙 - 花潮论坛 - Powered by Discuz! Archiver

起个网名好难 发表于 2024-5-11 22:17

窗外

本帖最后由起个网名好难于 2024-5-11 22:15 编辑 <br /><br /><p style="font:normal 36px '微软雅黑';text-align:center;color:brown;"> 双击切换画面</p>
<style>
#oblk {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
}

#bkg {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
display: none;
}

#uBlk {
overflow: hidden;
width: 600px;
height: 800px;
margin: auto;
border-radius:24px;
box-shadow: 4px 4px 10px black;
position: relative;
}
.lrcShow{font:normal 32px sans-serif;position:absolute;width:1.2em;left:50px;top:50px;color:lightgray;filter:drop-shadow(1px 1px 1px white);
letter-spacing:2px;cursor:pointer; z-index:100;writing-mode: vertical-rl;}
.lrcShow::before{position:absolute;content:attr(data-lrc);width:0;height:100%;left:0;top:0;color:blue;writing-mode: vertical-rl;
background-image:url(https://z4a.net/images/2024/01/14/auewj-fb7cv.jpg);-webkit-background-clip:text;overflow:hidden;white-space:nowrap;animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);}

@keyframes bgMove0 { from { width: 100%; height: 0; } to { width: 100%; height: 100%; } }
@keyframes bgMove1 { from { width: 100%; height: 0; } to { width: 100%; height: 100%; } }
#indicator {position:absolute;left:30%;bottom:10px;width:40%;z-index:100; appearance: none; height:8px; overflow:hidden; border-radius: 8px;}
#indicator::-webkit-progress-bar {background:pink;}
#indicator::-webkit-progress-value {background:blue;}
#wBlk {position:absolute;top:0px;left:0px;width:100%;height:100%;z-index:99;}
</style>

<div id="uBlk">
<div id="oblk" title="双击切换画面">
<img id="bkg" alt="bkg" src="" />
</div>
<img src="https://pic.imgdb.cn/item/663f76fe0ea9cb1403680567.png" id="wBlk">
<div class="lrcShow" data-lrc="窗外">LRC</div>
<progress id="indicator" value='0' max='100' ></progress>
</div>
<script>
var engine,imgSet = ["https://pic.imgdb.cn/item/663e0b9e0ea9cb1403fe1a86.jpg","https://pic.imgdb.cn/item/663e0b9d0ea9cb1403fe1a04.jpg", "https://pic.imgdb.cn/item/663e0b8e0ea9cb1403fdfdbf.jpg", "https://pic.imgdb.cn/item/663e0b8e0ea9cb1403fdfd97.jpg", "https://pic.imgdb.cn/item/663e0b8e0ea9cb1403fdfd77.jpg", "https://pic.imgdb.cn/item/663e0b8e0ea9cb1403fdfd37.jpg", "https://pic.imgdb.cn/item/663e0b8d0ea9cb1403fdfd09.jpg", "https://pic.imgdb.cn/item/663e0b7c0ea9cb1403fdd912.jpg", "https://pic.imgdb.cn/item/663e0b7c0ea9cb1403fdd8c5.jpg", "https://pic.imgdb.cn/item/663e0b7c0ea9cb1403fdd86a.jpg", "https://pic.imgdb.cn/item/663e0b7c0ea9cb1403fdd851.jpg", "https://pic.imgdb.cn/item/663e0b7b0ea9cb1403fdd821.jpg", "https://pic.imgdb.cn/item/663e0b6c0ea9cb1403fdbaac.jpg", "https://pic.imgdb.cn/item/663e0b6c0ea9cb1403fdba84.jpg", "https://pic.imgdb.cn/item/663e0b6c0ea9cb1403fdba64.jpg", "https://pic.imgdb.cn/item/663e0b6b0ea9cb1403fdba32.jpg", "https://pic.imgdb.cn/item/663e0b6b0ea9cb1403fdb9cb.jpg"];
var sF = document.createElement('script');
sF.src = 'https://mubaidr.js.org/rainyday.js/js/rainyday.min.js';
document.body.appendChild(sF);
sF.onload = function() {

(function chg_cur_pic() {
if (engine) engine.destroy();
bkg.crossOrigin = 'anonymous';
bkg.onload = function() {
   engine = new RainyDay({
   image: bkg,
   parentElement: oblk,
blur:0
   });

   let canv = oblk.getElementsByTagName('canvas');
   canv.style.left = '0px';
   canv.style.top = '0px';
};

bkg.src = imgSet;
wBlk.ondblclick = chg_cur_pic;
})();

}
/**----------------------------------------------------------------------------------**/
var lrcPlayerY=function(){return this.init.apply(this,arguments)};lrcPlayerY.prototype={constructor:lrcPlayerY,init:function(opts){lyricTxt=opts.lrcTxt.replace(/(^\s*)|(\s*$)/g,'');this.lrcShowObj=document.querySelector('.lrcShow');this.indicator=opts.indicator;this.lrcVec=this.handleLrc(lyricTxt);this.genPlayer(opts.audioURL)},handleLrc:function(lyricTxt){var parts=lyricTxt.replace(/(^\s*)|(\s*$)/g,"").split(/\r|\n|\r\n/);var 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.toFixed(2),words:lrcTxt})}}}lrcs.sort(function(a,b){return(a.seconds-b.seconds)});for(k=0;k<lrcs.length-1;k++){lrcs.dur=+(lrcs.seconds-lrcs.seconds).toFixed(2)}return lrcs},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+'s');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);this.idx=0;this.mObj.addEventListener('ended',()=>{this.idx=0;this.mObj.play()});this.mObj.addEventListener('canplay',()=>{this.lrcVec.dur=+(this.mObj.duration-this.lrcVec.seconds).toFixed(2)});this.mObj.addEventListener('play',()=>{this.lrcShowObj.style.setProperty('--aniPlayState','running')});this.mObj.addEventListener('pause',()=>{if(this.idx==1&&this.mObj.currentTime<1){this.mObj.play();return false}this.lrcShowObj.style.setProperty('--aniPlayState','paused')});this.mObj.addEventListener('error',()=>{console.log("audio wrong, remove play start event");this.lrcShowObj.style.display='none';this.lrcShowObj.removeChild(this)});this.mObj.addEventListener('timeupdate',()=>{if(this.indicator){this.indicator.value=this.mObj.currentTime/this.mObj.duration*100}if(this.idx<this.lrcVec.length){if(this.mObj.currentTime>=this.lrcVec.seconds){this.showLrc(this.lrcVec.dur)}}});this.lrcShowObj.addEventListener('click',()=>{if(this.mObj.paused){this.mObj.play()}else{this.mObj.pause()}})}}
/**-----------------------------------------------------------------------------------**/
let lrcStr = `
窗外 --- 李琛
今夜我又来到你的窗外
窗帘上你的影子多么可爱
悄悄的爱过你这么多年
明天我就要离开
多少回我来到你的窗外
也曾想敲敲门叫你出来
想一想你的美丽
我的平凡
一次次默默走开
再见了心爱的梦中女孩
我将要去远方寻找未来
假如我有一天荣归故里
再到你窗外诉说情怀
再见了心爱的梦中女孩
对着你的影子说声珍重
假如我永远不再回来
就让月亮守在你窗外

今夜我又来到你的窗外
窗帘上你的影子多么可爱
悄悄的爱过你这么多年
明天我就要离开
多少回我来到你的窗外
也曾想敲敲门叫你出来
想一想你的美丽
我的平凡
一次次默默走开
再见了心爱的梦中女孩
我将要去远方寻找未来
假如我有一天荣归故里
再到你窗外诉说情怀
再见了心爱的梦中女孩
对着你的影子说声珍重
假如我永远不再回来
就让月亮守在你窗外
再见了心爱的梦中女孩
我将要去远方寻找未来
假如我有一天荣归故里
再到你窗外诉说情怀
再见了心爱的梦中女孩
对着你的影子说声珍重
假如我永远不再回来
就让月亮守在你窗外
就让月亮守在你窗外
`;
//------------------------------------------------------------------
var opts = {
lrcTxt:lrcStr,
audioURL:"https://music.163.com/song/media/outer/url?id=126443.mp3",
indicator: indicator,
}
var lrcPlayerY = new lrcPlayerY(opts);

</script>

小辣椒 发表于 2024-5-11 22:56

难难我手机欣赏，完美的效果{:4_199:}

小辣椒 发表于 2024-5-11 22:57

这个特效也是特别棒，欣赏难难好制作

小辣椒 发表于 2024-5-11 22:58

歌词同步也是配的好，难难特别的棒{:4_178:}

小辣椒 发表于 2024-5-11 22:58

感谢难难的精彩分享，赞的{:4_199:}

马黑黑 发表于 2024-5-11 23:35

{:4_199:}

红影发表于 2024-5-11 23:47

这个制作好美啊，欣赏难难好帖{:4_199:}

起个网名好难 发表于 2024-5-12 06:23

小辣椒发表于 2024-5-11 22:56
难难我手机欣赏，完美的效果

谢谢支持鼓励！

起个网名好难 发表于 2024-5-12 06:24

小辣椒发表于 2024-5-11 22:58
感谢难难的精彩分享，赞的

https://5b0988e595225.cdn.sohucs.com/images/20200216/b51438c7e583467f98adbc3d30b39180.gif

起个网名好难 发表于 2024-5-12 06:25

马黑黑发表于 2024-5-11 23:35

谢谢支持鼓励！
https://5b0988e595225.cdn.sohucs.com/images/20200216/b51438c7e583467f98adbc3d30b39180.gif

起个网名好难 发表于 2024-5-12 06:25

红影发表于 2024-5-11 23:47
这个制作好美啊，欣赏难难好帖

谢谢支持鼓励！
https://5b0988e595225.cdn.sohucs.com/images/20200216/b51438c7e583467f98adbc3d30b39180.gif

红影发表于 2024-5-12 10:10

起个网名好难发表于 2024-5-12 06:25
谢谢支持鼓励！

这个双击后，雨滴依然滑落着。
每张图图都是同一种风格的呢，这个制作很有特色。难难厉害{:4_187:}

起个网名好难 发表于 2024-5-12 10:54

红影发表于 2024-5-12 10:10
这个双击后，雨滴依然滑落着。
每张图图都是同一种风格的呢，这个制作很有特色。难难厉害

没什么厉害{:5_111:}

其实就是换图片然后加上水滴。

https://pic.bbs.ybvv.com/forum/201810/31/113010mywz17yiazygjz7k.gif

红影发表于 2024-5-12 19:19

起个网名好难发表于 2024-5-12 10:54
没什么厉害

其实就是换图片然后加上水滴。

能做这么漂亮，也很不容易{:4_187:}

起个网名好难 发表于 2024-5-12 19:42

红影发表于 2024-5-12 19:19
能做这么漂亮，也很不容易

漂亮的都是别人做的我只是借用了这些图片。

https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F0510%2F36c948a0j00sd9tvv001cd000hs00v1g.jpg&thumbnail=660x2147483647&quality=80&type=jpg

红影发表于 2024-5-12 22:29

起个网名好难发表于 2024-5-12 19:42
漂亮的都是别人做的我只是借用了这些图片。

谢谢难难的节日祝福{:4_187:}

起个网名好难 发表于 2024-5-13 06:31

红影发表于 2024-5-12 22:29
谢谢难难的节日祝福

https://p5.itc.cn/q_70/images03/20210115/cf2a49614083467d8b5186f78bd85524.gif

红影发表于 2024-5-13 09:08

起个网名好难发表于 2024-5-13 06:31

漂亮的蝴蝶兰。谢谢难难，早上好{:4_187:}

老谟深虑 发表于 2024-5-13 09:50

欣赏老师的精美音画，点赞！收藏学习。

起个网名好难 发表于 2024-5-13 16:32

老谟深虑发表于 2024-5-13 09:50
欣赏老师的精美音画，点赞！收藏学习。

谢谢鼓励支持！

https://pic.bbs.ybvv.com/forum/201806/09/133426vhujbquzbj2d2mqp.gif

页: [1] 2

花潮论坛's Archiver

窗外