千秋此意

东篱闲人 发表于 2023-8-30 09:06

<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1952254">
<br /><br /><style>
#papa{ margin: 10px -300px;width: 1164px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 6px #880000; overflow: hidden;height: 640px;background:#000000;border: 1px solid;display: grid;position: relative;z-index: 12345; --state: running;}
#mplayer {position:absolute;top:90%;left:2%;cursor: pointer;font: normal 1.6em/0em 华文隶书;
color:#fff000;z-index: 1650;animation: rot 0.5s linear infinite;}
@keyframes rot{0% {opacity: 1;transform: scale(1);}100% {opacity: 1;transform:scale(1);filter:hue-rotate(360deg)contrast(100%)brightness(250%);}}
#lrc {
   --state: paused;
   --motion: cover2;
   --tt: 2s;
   --bg: linear-gradient(0deg, #ff0000, #ff0000, #ff0000);
   position: absolute;z-index: 6;
   left: 52%;
   transform: translate(-50%);
   top: 85%;
   font:normal 1.9em 华文新魏;
   font-weight:200;
   color: #000080;
   white-space: pre;
   -webkit-background-clip: text;
   filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
}
#lrc::before {
   position: absolute;
   content: attr(data-lrc);
   width: 20%;
   height: 100%;
   color: transparent;
   overflow: hidden;
   white-space: pre;
   background: var(--bg);

   -webkit-background-clip: text;
   animation: var(--motion) var(--tt) linear forwards;
   animation-play-state: var(--state);
}
@keyframes cover1{0% { width: 0%;transform:rotateY(0deg)scale(1)}100% { width: 100%;transform:rotateY(0deg)scale(1);filter:hue-rotate(360deg)}}
@keyframes cover2 { 0% { width: 0%;transform:rotateY(0deg)scale(1)}100% { width: 100%;transform:rotateY(0deg)scale(1);filter:hue-rotate(360deg)}}

.photo {width: 100%;
height: 100%;
position: absolute;z-index: 4;
top:0px; left:0px;
opacity: 0;
animation: round 30s linear infinite;}
@keyframes round{
0% {opacity: 1;transform: scale(1);filter:blur(1px)}
5% {opacity: 1;transform: scale(1);filter:hue-rotate(360deg)contrast(120%)brightness(120%);}
10% {opacity: 1;transform: scale(1);}
27% {opacity: 1;transform:scale(4)rotateY(0deg);filter:blur(0px)}
28% {opacity: 0;transform:scale(4)rotateY(0deg);filter:blur(2px)}
}
.photo:nth-child(1) {animation-delay: 24s;background: url('https://pic.imgdb.cn/item/64ee922f661c6c8e54742d50.jpg') no-repeat center/cover;}
.photo:nth-child(2) {animation-delay: 18s;background: url('https://pic.imgdb.cn/item/64ee924a661c6c8e5474313a.jpg') no-repeat center/cover;}
.photo:nth-child(3) {animation-delay: 12s;background: url('https://pic.imgdb.cn/item/64ee9265661c6c8e54744e27.jpg') no-repeat center/cover;}
.photo:nth-child(4) {animation-delay: 6s;background: url('https://pic.imgdb.cn/item/64ee9280661c6c8e54747329.jpg') no-repeat center/cover;}
.photo:nth-child(5) {animation-delay: 0s;background: url('https://pic.imgdb.cn/item/64ee929a661c6c8e54749820.jpg') no-repeat center/cover;}

.stop .photo:nth-child(1){animation-play-state: paused;}
.stop .photo:nth-child(2){animation-play-state: paused;}
.stop .photo:nth-child(3){animation-play-state: paused;}
.stop .photo:nth-child(4){animation-play-state: paused;}
.stop .photo:nth-child(5){animation-play-state: paused;}
#dt{position: absolute;top:0%; left:0%;width: 100%;height: 100%;z-index: 4;mix-blend-mode: lighten; }
#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:5%; left:83%;color:#ffffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 1.6em华文新魏; opacity: 1; cursor: pointer; z-index: 1660}
</style>
<div id="papa">
<div id="Img" >
<div class="photo" ></div>
<div class="photo" ></div>
<div class="photo" ></div>
<div class="photo" ></div>
<div class="photo" ></div>
</div>

<div id='dt' ></div>
<span id="fullscreen">全屏观赏</span>

<div id="lrc" data-lrc="千秋此意">千秋此意</div>
<div id="mplayer" ><span id="bf">暂停</span></div>
                     <audio id="aud" src="https://music.163.com/song/media/outer/url?id=413829631.mp3" autoplay="" loop=""></audio>
</div>

<script >
(function() {
/*原始lrc歌词*/
let lrcStr = ` 千秋此意
编辑：东篱闲人
我曾借明月当头
寻得某个人
点漆眼眸
相对落座山口
无茶亦无酒
他含笑说些春秋
奉与这一生
微澜缘由
低眉抛置枯愁
江海行扁舟
高处风情万种
衣角都辉荣
最终不过多添个失意面孔
你是山下兰芽
梦遍西风白发
萧瑟年月赏作温柔晩霞
枕些无主杨花
趁着倦意睡下
千里外应有
天星清辉满洒
你是飞鸿雪花
写遍倦客思家
萧瑟年月多少书信不达
偶遇风波故人
向来擦肩无话
后来无谁看
东栏新雪梅花
待中宵风露渐浓
他复又提起
微芒灯笼
而我未曾挽留
垂眸一拱手
敬揖造化赠我
这人间相逢
转身竹杖芒鞋与烟雨相拥
你是千岁闲暇
无须悲欢作答
萧瑟年月也作锦上添花
来饰杯身青纹
悠闲生火烹茶
将千里行云
一并痛快饮下
你是柴门冬夏
也曾高轩风雅
萧瑟年月催人多习潇洒
料峭春风吹醒
悠长诗酒生涯
一梦任江山
胜过白马
你是千岁闲暇
无须悲欢作答
萧瑟年月也作锦上添花
来饰杯身青纹
悠闲生火烹茶
将千里行云
一并痛快饮下
你是柴门冬夏
也曾高轩风雅
萧瑟年月催人多习潇洒
料峭春风吹醒
悠长诗酒生涯
一梦任江山
胜过轻舟白马
`;

/*变量：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引；averAdd ：平均值补偿*/
let mKey = 0, mFlag = true, averAdd = 0.3;

/*函数：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
let lrcTime = (ar) => {
   let tmpAr = [];
   for(j = 0; j <ar.length - 1; j ++) {
            if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
   }
   let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
   tmpAr.push(aver);
   tmpAr.forEach((item,key) => {
            ar = item > aver ? aver : item;
   });
   return ar;
};

/*函数：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
   let lrcAr = [];
   let calcRule = ;
   for(x of text.split('\n')) {
            let ar = [];
            let re = /\d+[\.:]\d+([\.:]\d+)?/g;
            let geci = x.replace(re,'');
            if(geci) {
                     geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');
                     let time = x.match(re);
                     if(time != null) {
                           for(y of time) {
                                    let tmp = y.match(/\d+/g);
                                    let sec = 0;
                                    for(z in tmp) sec += tmp * calcRule;
                                    ar = ;
                                    lrcAr.push(ar);
                           }
                     }
            }
   }
   lrcAr.sort((a,b)=> a - b);
   return(lrcTime(lrcAr));
};

/*函数：模拟显示同步歌词*/
let showLrc = (time) => {
   let name = mFlag ? 'cover1' : 'cover2';
   lrc.innerHTML = lrcAr;
   lrc.dataset.lrc = lrcAr;
   lrc.style.setProperty('--motion', name);
   lrc.style.setProperty('--tt', time + 's');
   lrc.style.setProperty('--state', 'running');
   mKey += 1;
   mFlag = !mFlag;
};

/*函数：处理当前歌词索引 mKey*/
let calcKey = () => {
   for (j = 0; j < lrcAr.length; j++) {
            if (aud.currentTime <= lrcAr) {
                     mKey = j - 1;
                     break;
            }
   }
   if (mKey < 0) mKey = 0;
   if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
   let time = lrcAr - (aud.currentTime - lrcAr);
   showLrc(time);
};

/*格式化时间信息*/
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;
}

/*函数：关键帧动画状态切换*/
let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),mplayer.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),mplayer.style.animationPlayState = 'running');

/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
   for (j = 0; j < lrcAr.length; j++) {
            if (aud.currentTime >= lrcAr) {
                     cKey = j;
                     if (mKey === j) showLrc(lrcAr);
                     else continue;
            }
   }
});
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();
let fs = true;
   fullscreen.onclick = () => {
            fs ? (fullscreen.innerText = '退出全屏',papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
            fs = !fs;
   };
</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;
         }
   }
};
}

var imagee= document.getElementById("Img");
var image= document.getElementById("testImg");
var aud= document.getElementById('aud');
var mplayer=document.getElementById("bf");
mplayer.onclick = function() {
if ( bf.innerText == '暂停') {
         image.stop();aud.pause(); imagee.classList.add('stop');
      bf.innerText="播放";
   } else {
      image.play();aud.play(); imagee.classList.remove('stop');
         bf.innerText="暂停";
   }
};

</script>
</td></tr></table>

红影发表于 2023-8-30 09:38

恭喜东篱大哥学会新的代码发帖。这个制作古风古韵的，真漂亮{:4_199:}

东篱闲人 发表于 2023-8-30 09:51

红影发表于 2023-8-30 09:38
恭喜东篱大哥学会新的代码发帖。这个制作古风古韵的，真漂亮

盗了人家代码，然后瞎琢磨。。。。{:5_106:}

红影发表于 2023-8-30 10:11

东篱闲人发表于 2023-8-30 09:51
盗了人家代码，然后瞎琢磨。。。。

做得很好呢，非常成功{:4_187:}

东篱闲人 发表于 2023-8-30 10:18

红影发表于 2023-8-30 10:11
做得很好呢，非常成功

马马虎虎。。。{:5_106:}

红影发表于 2023-8-30 10:23

东篱闲人发表于 2023-8-30 10:18
马马虎虎。。。

做这个需要很多同类图图，也很不容易呢。

小辣椒 发表于 2023-8-30 11:34

老头好制作，晚上电脑来欣赏{:4_187:}

东篱闲人 发表于 2023-8-30 11:36

小辣椒发表于 2023-8-30 11:34
老头好制作，晚上电脑来欣赏

嗯嗯嗯。。。{:4_204:}

页: [1]

花潮论坛's Archiver

千秋此意