注册时间2021-11-14
在线时间 小时
- 最后登录
- 1970-1-1
|
楼主 |
发表于 2022-1-24 22:35
|
显示全部楼层
本帖最后由 灵山莲 于 2022-3-23 11:56 编辑 <br /><br />
谢谢一师版主大力支持!谢谢您漂亮的美图哦~ 祝您小年快乐!
-----------------
<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_10225643">
<style type="text/css">
#hWindow {
width:960px;
height:640px;
bbbackground-image:url(data/attachment/forum/202203/23/105124l110y1isvf1ikasa.jpg);
bbbackground-size:cover;
background-color:#ccf;
border:thick brown ridge;
position:relative;
margin:100px auto 32px -180px;
overflow:hidden;
border-radius:24px;
}
#curp {
width: 100%;
height:100%;
background-image:url(data/attachment/forum/202203/23/105121ca299up6otquobq5.jpg);
background-size: cover;
transform-origin: center;
position:absolute; top:0px; left:0px;
}
#musickrc01 {
text-align:center;
color:#f00;
font-size: 40px; font-family:华文隶书;
filter:drop-shadow(#ffffff 2px 0 0)
drop-shadow(#ffffff 0 2px 0)
drop-shadow(#ffffff -2px 0 0)
drop-shadow(#ffffff 0 -2px 0);
float:left; display:block;
}
#musickrc02 {
text-align:center;
color:#00c;
font-size: 28px; font-family:微软雅黑;
filter:drop-shadow(#ffffff 2px 0 0)
drop-shadow(#ffffff 0 2px 0)
drop-shadow(#ffffff -2px 0 0)
drop-shadow(#ffffff 0 -2px 0);
float:right;
}
#LRCShow {
width:550px;height:100px;
margin:16px auto
}
#rdisk{
width: 75px;height:75px;
background: url(http://image.hnol.net/c/2022-01/08/22/202201082235389221-5769293.png) 0 0 / 100% 100%;
overflow:hidden;border-radius:50%;
animation: circleSmall2 10s linear infinite;
position:absolute;left:5%;bottom:10px;
animation-play-state:paused;
}
/*旋转动画*/
@keyframes circleSmall2{
0% {
transform: rotateX(30deg) rotateY(-45deg) rotateZ(0deg);
}
100% {
transform: rotateX(30deg) rotateY(-45deg) rotateZ(360deg);
}
}
</style>
<div id="hWindow">
<div id="curp"></div>
<div id="rdisk"></div>
<div id="LRCShow" style="position:absolute;left:25%;bottom:10px;" >
<span id="musickrc01"></span>
<br style="clear:both;">
<span id="musickrc02"></span>
<audio src="http://link.hhtjim.com/kw/77717681.mp3" id="mplay" loop >
</audio>
</div>
</div>
<textarea id="lrc_content" style="visibility:hidden;">
[00:00.00]酒醉的蝴蝶(女生版DJ何鹏版) - 孙艺琪
[00:02.90]词:刘海东
[00:03.65]曲:刘海东
[00:04.47]D J :何鹏
[00:05.45]伴唱:凌菲
[00:06.26]发行:大河唱片
[00:22.93]怎么也飞不出
[00:25.36]花花的世界
[00:27.86]原来我是一只
[00:30.25]酒醉的蝴蝶
[00:32.76]你的那一句誓约
[00:35.24]来的轻描又淡写
[00:37.74]却要换我这一生
[00:40.26]再也解不开的结
[00:42.92]春去镜前花
[00:45.48]秋来水中月
[00:47.87]原来我就是那一只
[00:50.46]酒醉的蝴蝶
[00:53.16]花开花时节
[00:55.60]月落月圆缺
[00:58.03]原来我就是那一只
[01:00.67]酒醉的蝴蝶
[01:23.58]怎么也飞不出
[01:25.96]花花的世界
[01:28.54]原来我是一只
[01:30.99]酒醉的蝴蝶
[01:33.34]你的那一句誓约
[01:35.80]来的轻描又淡写
[01:38.34]却要换我这一生
[01:40.91]再也解不开的结
[01:43.50]春去镜前花
[01:45.97]秋来水中月
[01:48.46]原来我就是那一只
[01:51.13]酒醉的蝴蝶
[01:53.63]花开花时节
[01:56.26]月落月圆缺
[01:58.55]原来我就是那一只
[02:01.21]酒醉的蝴蝶
[02:24.10]怎么也飞不出
[02:26.53]花花的世界
[02:29.00]原来我是一只
[02:31.50]酒醉的蝴蝶
[02:33.98]你的那一句誓约
[02:36.49]来的轻描又淡写
[02:38.99]却要换我这一生
[02:41.48]再也解不开的结
[02:44.15]春去镜前花
[02:46.57]秋来水中月
[02:49.03]原来我就是那一只
[02:51.67]酒醉的蝴蝶
[02:54.37]花开花时节
[02:56.77]月落月圆缺
[02:59.20]原来我就是那一只
[03:01.85]酒醉的蝴蝶
[03:04.38]春去镜前花
[03:06.93]秋来水中月
[03:09.27]原来我就是那一只
[03:11.99]酒醉的蝴蝶
[03:14.48]花开花时节
[03:17.02]月落月圆缺
[03:19.42]原来我就是那一只
[03:22.00]酒醉的蝴蝶
[03:24.61]酒醉的蝴蝶
</textarea>
<script type="text/javascript">
var imgSet = [
"data/attachment/forum/202203/23/105121ca299up6otquobq5.jpg",
"data/attachment/forum/202203/23/105121offcwf4j4njvy94f.jpg",
"data/attachment/forum/202203/23/105121n9u7rq2e7eg2eteb.jpg",
"data/attachment/forum/202203/23/105121hjoocge8jthcoebt.jpg",
"data/attachment/forum/202203/23/105121pt334h8h6t6it806.jpg",
"data/attachment/forum/202203/23/105122pa25a1329n02z4j0.jpg",
"data/attachment/forum/202203/23/105122kc0cj7h7d4707khh.jpg",
"data/attachment/forum/202203/23/105122aroq3d7l4p5e8ggd.jpg",
"data/attachment/forum/202203/23/105122wkfue6108q1eofo1.jpg",
"data/attachment/forum/202203/23/105122sdhdja8s8a08ayzy.jpg",
"data/attachment/forum/202203/23/105123mesjj1kskgosehmo.jpg",
"data/attachment/forum/202203/23/105123zpps44vffo8lllsx.jpg",
"data/attachment/forum/202203/23/105123s7yppaaa5g85eg1i.jpg",
"data/attachment/forum/202203/23/105123q1liwqpiw6wywwhu.jpg",
"data/attachment/forum/202203/23/105123ukajbhbj75yxulbi.jpg",
"data/attachment/forum/202203/23/105124pfiwikj3zji7ijew.jpg",
"data/attachment/forum/202203/23/105124l110y1isvf1ikasa.jpg"
];
var keyFrames =
[{clipPath: 'polygon(50% 0%, 50% 50%, 0% 50%, 50% 50%,50% 100%, 50% 50%, 100% 50%, 50% 50%)', opacity:'0.4'},
{clipPath: 'polygon(50% 0%, 25% 25%, 0% 50%, 25% 75%,50% 100%, 75% 75%, 100% 50%, 75% 25%)', opacity:'0.7', offset:0.5},
{clipPath: 'polygon(50% 0%, 0% 0%, 0% 50%, 0% 100%,50% 100%, 100% 100%, 100% 50%, 100% 0%)', opacity:'1', offset:0.8},
{clipPath: 'polygon(50% 0%, 0% 0%, 0% 50%, 0% 100%,50% 100%, 100% 100%, 100% 50%, 100% 0%)', opacity:'0.4'}];
var EffectTiming = {duration: 8000, fill: 'forwards'};
var imgIdx = 0, lastIdx = imgSet.length - 1;
var imgBlock, curp, aniObj;
function parseLyric(text) {
var lines = text.split('\n'),pattern = /\[\d{2}:\d{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("mplay");
var songkrc = document.getElementById("lrc_content").innerHTML;
var lyric = parseLyric(songkrc);
var rdisk = document.getElementById("rdisk");
my_audio.onplaying = function() {rdisk.style.animationPlayState='running';}
my_audio.onpause = function() {rdisk.style.animationPlayState='paused';}
my_audio.ontimeupdate = function () {
for (var i = 0; i < lyric.length; i++) {
if(this.currentTime > lyric[0]){
document.getElementById("musickrc01").innerHTML = lyric[1];
if(i+1==lyric.length){
document.getElementById("musickrc02").innerHTML = "";
}
else{
document.getElementById("musickrc02").innerHTML = lyric[i + 1][1];
};
};
};
};
rdisk.onclick = function() {
if(my_audio.paused) {
my_audio.play();
}
else {
my_audio.pause();
}
}
function initTrun() {
imgBlock = document.getElementById('hWindow');
curp = document.getElementById('curp');
aniObj = curp.animate(keyFrames, EffectTiming);
aniObj.pause();
aniObj.onfinish = chg_cur_pic;
chg_cur_pic();my_audio.play();
}
function chg_cur_pic() {
imgBlock.style.backgroundSize = "cover";
imgBlock.style.backgroundImage = "url(" + imgSet[lastIdx] + ")";
curp.style.backgroundImage = "url(" + imgSet[imgIdx] + ")";
lastIdx = imgIdx;
imgIdx++;
imgIdx %= imgSet.length;
aniObj.play();
}
initTrun();
</script>
</td></tr></table>
</div>
<div id="comment_10225643" class="cm">
</div>
<div id="post_rate_div_10225643"></div>
</div>
</div>
|
|