我们一直在相遇的路上

醉美水芙蓉 发表于 2022-5-29 17:07

本帖最后由醉美水芙蓉于 2022-5-29 17:07 编辑 <br /><br /><style type="text/css">
#hWindow {
width:1000px;
height:600px;
box-shadow:0px 0px 0px 2px #ffffff, 0px 0px 0px 20px #800000;
position:relative;
margin:15px auto;
}
#hWindow .item {
width: 200px;
height:600px;
display:table-cell;
background-size: 1000px 600px;
transform-origin: center;
}
</style>

<div id="hWindow">
<div style="background-position-x:0px; "class="item"></div>

<div style="background-position-x: -200px; "class="item"></div>

<div style="background-position-x: -400px; "class="item"></div>

<div style="background-position-x: -600px; "class="item"></div>

<div style="background-position-x: -800px; "class="item"></div>

<div class="mt10"style="position:absolute;top:380px;left:- 0px;">
<div class="img_border"><img src="http://image.hnol.net/c/2022-01/08/22/202201082235389221-5769293.png" id="aplay"style="width: 100%; height: 100%;" ></div>
</div>
<audio src="https://www.qqmc.com/up/kwlink.php?id=209506111&.mp3" id="audio" oncontextmenu="return false;" controls loop autoplaystyle="position:absolute;top:548px;left:380px;"></audio>
<div class="items"style="position:absolute;top:348px;left:20px;">
<div id="musickrc">
<span id="musickrc01" style="color:#ff0000;transform: translate(-20%,0%);"></span><span id="musickrc02"style="color:#000079;transform: translate(20%,0%);"></span>
</div></div>
</div>
<style type="text/css">
*{margin:0px;border:0;}select{font-size:100%;}.fr{float:right;}.lr{float:left;}.mt10{max-width:640px;min-width:320px;margin:0px auto;text-align:center;}
.img_border{display:inline-block;width:120px;height:120px;margin:0px ;position: absolute;top:110px; left:100px;transform: scale(1.2, .5)}
.img_border #aplay{border:2px solid #000000;border-radius:50%; }
.z360z{-webkit-animation:rotating 10s linear infinite;animation:rotating 10s linear infinite}@-webkit-keyframes rotating{from{-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotating{from{-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}
#musickrc{width:960px;line-height:60px;margin:50px auto;padding:0px;;position: absolute;left:0px;}
#musickrc span {display:block;text-align:center;font-size: 40px; font-family:汉标精工粗犷体;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);}
#audio{width:100%;z-index: 155555;bottom: 0;opacity: 0.2;transition: all 2s;width: 250px; height: 32px;box-shadow:0px 0px 0px 1px #222222;border-radius:25%;position: absolute;top:200px; left:490px;}
#audio:hover{opacity: 1;filter:hue-rotate(160deg);}
</style>
<style type="text/css">.items{z-index: 100;animation: slider 16s linear infinite ;}
@keyframes slider {from {opacity: 1;filter:hue-rotate(360deg)contrast(140%)brightness(150%);}
50% {opacity: 1;}to {opacity: 1;filter:hue-rotate(0deg)contrast(120%)brightness(100%);}}
</style>
<script type="text/javascript">var songkrc = "我们一直在相遇的路上 - 海来阿木\r\n 词：海来阿木\r\n 曲：海来阿木\r\n OP：坚诚文化\r\n LRC编辑：醉美水芙蓉\r\n 别怕我们还会再相见\r\n 我们一直在相遇的路上\r\n 这一天不会太久远\r\n 往前是春暖花开的季节\r\n 你是否在一个人的夜里孤独\r\n 是否想起一些很久没再见的人\r\n 时而你望着星空时而你望着月亮\r\n 泣干眼泪猜想思念的人\r\n 她在不在里面\r\n 错过我这里的春夏秋冬的你\r\n 是否还在经历那些美丽的疼痛\r\n 一想起你的脸他总是哭红眼\r\n 千言万语越过群山汇成\r\n 我这一句思念\r\n 别怕我们还会再相见\r\n 我们一直在相遇的路上\r\n 这一天不会太久远\r\n 往前是春暖花开的季节\r\n 我们一定还会再相见\r\n 可能不再是年轻的模样\r\n 这一天不会太久远\r\n 身后是大雪纷飞的寒夜\r\n 错过我这里的春夏秋冬的你\r\n 是否还在经历那些美丽的疼痛\r\n 一想起你的脸他总是哭红眼\r\n 千言万语越过群山汇成\r\n 我这一句思念\r\n 别怕我们还会再相见\r\n 我们一直在相遇的路上\r\n 这一天不会太久远\r\n 往前是春暖花开的季节\r\n 我们一定还会再相见\r\n 可能不再是年轻的模样\r\n 这一天不会太久远\r\n 身后是大雪纷飞的寒夜\r\n 谢谢欣赏\r\n";function parseLyric(text) { var lines = text.split('\r\n'),pattern = /\[\d{2}:\d{2}.\d{2}\]/g,result = []; while (!pattern.test(lines)) {lines = lines.slice(1); }; lines.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(,10) * 60 + parseFloat(t), value]); }); }); result.sort(function(a, b){ return a - b;}); return result;}</script>
<script type="text/javascript">
var my_audio =document.getElementById("audio");my_audio.onended = function(){document.getElementById("aplay").className="";};my_audio.onplaying = function(){document.getElementById("aplay").className="z360z";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(songkrc); my_audio.ontimeupdate = function () { for (var i = 0; i < lyric.length; i++) { if(this.currentTime > lyric){ document.getElementById("musickrc01").innerHTML = lyric; if(i+1==lyric.length){ document.getElementById("musickrc01").innerHTML = ""; }else{ document.getElementById("musickrc02").innerHTML = lyric;};};};}; my_audio.play();</script>

<script type="text/javascript">
var imgSet = [
"http://pan.yinhuabbs.cn/view.php/5912b03f535abce2a1fb4882f60ef83f.jpg",
"http://pan.yinhuabbs.cn/view.php/eea87c849a8b8675368e287cc6625612.jpg",
"http://pan.yinhuabbs.cn/view.php/6003b9e77d4e66603552c7201e123731.jpg",
"http://pan.yinhuabbs.cn/view.php/fac97341e50d68a312ec1c395e47e938.jpg",
"http://pan.yinhuabbs.cn/view.php/662ff27fe1b19f58b636e8cc403d1be9.jpg",
"http://pan.yinhuabbs.cn/view.php/06e35e7bf52d8b2f81246a2999e0fda4.jpg",
"http://pan.yinhuabbs.cn/view.php/be842ba0dd9ee63ace28481ef3189e93.jpg",
"http://pan.yinhuabbs.cn/view.php/1a5260d8ac1b96e11bb26a56f1d88687.jpg",
"http://pan.yinhuabbs.cn/view.php/2ee53b21ec7cfb0250d357dd32061bb5.jpg",
"http://pan.yinhuabbs.cn/view.php/050b0f8e2eb92df1b10c7e7da365d60c.jpg"
];
var Keyframes = [
[{ transform: 'rotateY(90deg)', opacity:'1'},{filter:'hue-rotate(360deg)contrast(120%)brightness(120%)'},
{offset: 1,transform: 'rotateY(0deg)scale(1)', opacity:'1'}]
];
var EffectTiming = {duration: 5000, fill: 'forwards'};
var imgIdx = 0, lastIdx = imgSet.length - 1;
var imgBlock, items, aniObj;

function initTrun() {
aniObj = new Array();
imgBlock = document.getElementById('hWindow');
items = document.getElementsByClassName('item');

for (j = 0 ; j < items.length; j++) {
aniObj = items.animate(Keyframes, EffectTiming);
aniObj.pause();
}
aniObj.onfinish = chg_cur_pic;
chg_cur_pic();
}

function chg_cur_pic() {
imgBlock.style.backgroundSize = "cover";
for(i = 0; i < items.length; i++) {
items.style.backgroundImage = "url(" + imgSet + ")";
}
imgBlock.style.backgroundImage = "url(" + imgSet + ")";

lastIdx = imgIdx;
imgIdx++;
imgIdx %= imgSet.length;

for (j = 0 ; j < items.length; j++) {
aniObj.play();
}
}
initTrun();

</script>

红影发表于 2022-5-29 17:25

还漂亮的图片轮播制作，图中的美女是迪丽热巴吧，真美{:4_187:}

加林森 发表于 2022-5-29 17:29

水芙蓉又制作大美女出来了。漂亮！{:4_199:}

醉美水芙蓉 发表于 2022-5-29 17:30

红影发表于 2022-5-29 17:25
还漂亮的图片轮播制作，图中的美女是迪丽热巴吧，真美

有点遗憾，这个论坛歌词同步不显示？

醉美水芙蓉 发表于 2022-5-29 17:30

加林森发表于 2022-5-29 17:29
水芙蓉又制作大美女出来了。漂亮！

有点遗憾，这个播放器歌词同步不显示？

加林森 发表于 2022-5-29 17:34

醉美水芙蓉发表于 2022-5-29 17:30
有点遗憾，这个播放器歌词同步不显示？

你可以去看老黑的教程嘛，他发出来了同步的教程的。

马黑黑 发表于 2022-5-29 17:40

加载速度跟不上呢

东篱闲人 发表于 2022-5-29 20:35

切换加变色，多技术融合。。。{:5_116:}

醉美水芙蓉 发表于 2022-5-29 20:40

马黑黑发表于 2022-5-29 17:40
加载速度跟不上呢

手机可以看！

醉美水芙蓉 发表于 2022-5-29 20:41

东篱闲人发表于 2022-5-29 20:35
切换加变色，多技术融合。。。

跟东篱老师的PS没法比！

东篱闲人 发表于 2022-5-29 20:41

醉美水芙蓉发表于 2022-5-29 20:41
跟东篱老师的PS没法比！

还是你厉害。。{:5_116:}

马黑黑 发表于 2022-5-29 20:54

醉美水芙蓉发表于 2022-5-29 20:40
手机可以看！

额，我都没有手机

沧海一声啸 发表于 2022-5-29 21:01

这个我还是看不到了

醉美水芙蓉 发表于 2022-5-29 21:14

沧海一声啸发表于 2022-5-29 21:01
这个我还是看不到了

手机可以看！

冬天的雨 发表于 2022-5-29 22:49

这个手机也是没有听到音乐

冬天的雨 发表于 2022-5-29 22:51

你这个代码很奇怪，手机打开也是不快啊

醉美水芙蓉 发表于 2022-5-30 11:37

冬天的雨发表于 2022-5-29 22:51
你这个代码很奇怪，手机打开也是不快啊

是的，加载慢，音乐需要刷新，发发出来就是想看看哪位高手老师可以改一下？

冬天的雨 发表于 2022-5-30 11:53

代码太杂了，把不需要的去掉，

小辣椒 发表于 2022-6-1 18:12

醉美水芙蓉发表于 2022-5-29 17:30
有点遗憾，这个论坛歌词同步不显示？
问好水芙蓉，你这个别个论坛歌词同步可以出来吗？是不是升级后的https论坛发个链接我看看可以吗？

花潮论坛是升级了安全模式，http的要兼容模式可以看见，你这些歌词同步的代码是最老旧的那种，一般要上传后可以看见，但图片也是要https的，否则上传后也是要兼容模式可以看见。升级后https比较一般http是有一点不一样

不知道我这样回答你满意不满意

小辣椒 发表于 2022-6-1 18:15

冬天的雨发表于 2022-5-30 11:53
代码太杂了，把不需要的去掉，

混合代码

页: [1] 2

花潮论坛's Archiver

我们一直在相遇的路上