多图音画：《套马杆》 - 【代码图腾】 - 中画网 - Powered by Discuz! Archiver

论坛 › 【代码图腾】 › 多图音画：《套马杆》

寒冬残荷 发表于 2022-9-29 21:47

多图音画：《套马杆》

<style>
.bk1 {position:relative; left:0px; width:1000px; height:600px; margin:30px auto; box-shadow:0px 0px 20px 10px #008000; display: grid; place-items:center; overflow: hidden; z-index: 0; border:2px #cccccc solid;}
.bk2 {position:relative; left:0px; width: 996px; height:596px; margin: 0px auto; align-content:center; background: url('https://pic1.imgdb.cn/item/63357df216f2c2beb16d8984.jpg') no-repeat center/cover; display: grid; place-items:center; overflow:hidden; z-index : 1; border:0px #cccccc solid;animation:aniAct0 20s infinite;}
@keyframes aniAct0{
0%{opacity:0.8;transform:scale(1.05);}
50%{opacity:1;transform:scale(1.5);}
100%{opacity:0.8;transform:scale(1.05);}}
.lm0 {position:relative; left:0px; width: 996px; height:596px; margin: 0px auto; align-content:center; background: url('https://pic.imgdb.cn/item/6331055716f2c2beb14a95c4.jpg') no-repeat center/cover; display: grid; place-items:center; overflow:hidden; z-index : 1; border:0px #cccccc solid;animation:aniAct0 20s infinite;}
.lm1 {position:relative; left:0px; width: 996px; height:596px; margin: 0px auto; align-content:center; background: url('https://pic1.imgdb.cn/item/6334361f16f2c2beb14abe1d.jpg') no-repeat center/cover; display: grid; place-items:center; overflow:hidden; z-index : 1; border:0px #cccccc solid;animation:aniAct0 7s infinite;}
.lm2 {position:relative; left:0px; width: 996px; height:596px; margin: 0px auto; align-content:center; background: url('https://pic1.imgdb.cn/item/6334361f16f2c2beb14abe17.jpg') no-repeat center/cover; display: grid; place-items:center; overflow:hidden; z-index : 1; border:0px #cccccc solid;animation:aniAct0 5s infinite;}
.lm3 {position:relative; left:0px; width: 996px; height:596px; margin: 0px auto; align-content:center; background: url('https://pic1.imgdb.cn/item/633436a416f2c2beb14b3cc7.jpg') no-repeat center/cover; display: grid; place-items:center; overflow:hidden; z-index : 1; border:0px #cccccc solid;animation:aniAct0 6s infinite;}
.lm4 {position:relative; left:0px; width: 996px; height:596px; margin: 0px auto; align-content:center; background: url('https://pic1.imgdb.cn/item/6334366116f2c2beb14afe81.jpg') no-repeat center/cover; display: grid; place-items:center; overflow:hidden; z-index : 1; border:0px #cccccc solid;animation:aniAct0 6s infinite;}
.lm5 {position:relative; left:0px; width: 996px; height:596px; margin: 0px auto; align-content:center; background: url('https://pic1.imgdb.cn/item/633436d916f2c2beb14b6b8c.jpg') no-repeat center/cover; display: grid; place-items:center; overflow:hidden; z-index : 1; border:0px #cccccc solid;animation:aniAct0 5s infinite;}
.lm6 {position:relative; left:0px; width: 996px; height:596px; margin: 0px auto; align-content:center; background: url('https://pic1.imgdb.cn/item/6334366116f2c2beb14afe8d.jpg') no-repeat center/cover; display: grid; place-items:center; overflow:hidden; z-index : 1; border:0px #cccccc solid;animation:aniAct0 6s infinite;}
.lm7 {position:relative; left:0px; width: 996px; height:596px; margin: 0px auto; align-content:center; background: url('https://pic1.imgdb.cn/item/6334366116f2c2beb14afe86.jpg') no-repeat center/cover; display: grid; place-items:center; overflow:hidden; z-index : 1; border:0px #cccccc solid;animation:aniAct0 12s infinite;}
.lm8 {position:relative; left:0px; width: 996px; height:596px; margin: 0px auto; align-content:center; background: url('https://pic1.imgdb.cn/item/6334366116f2c2beb14afe7e.jpg') no-repeat center/cover; display: grid; place-items:center; overflow:hidden; z-index : 1; border:0px #cccccc solid;animation:aniAct0 5s infinite;}
.lm9 {position:relative; left:0px; width: 996px; height:596px; margin: 0px auto; align-content:center; background: url('https://tx2.a.yximgs.com/udata/music/music_ee57b90fc4f54e1aa906187ad69959550.jpg') no-repeat center/cover; display: grid; place-items:center; overflow:hidden; z-index : 1; border:0px #cccccc solid;animation:aniAct0 6s infinite;}
.lm10 {position:relative; left:0px; width: 996px; height:596px; margin: 0px auto; align-content:center; background: url('https://pic1.imgdb.cn/item/6334361f16f2c2beb14abe12.jpg') no-repeat center/cover; display: grid; place-items:center; overflow:hidden; z-index : 1; border:0px #cccccc solid;animation:aniAct0 6s infinite;}
.lm11 {position:relative; left:0px; width: 996px; height:596px; margin: 0px auto; align-content:center; background: url('https://pic1.imgdb.cn/item/6334366116f2c2beb14afe94.jpg') no-repeat center/cover; display: grid; place-items:center; overflow:hidden; z-index : 1; border:0px #cccccc solid;animation:aniAct0 6s infinite;}

#mplayer {position:absolute;z-index:2; bottom:0px; left:10px; width:100px; height: 30px; display: grid; place-items: center; cursor: pointer; }
#mplayer:hover #btnwrap, #mplayer:hover #prog { transform: translateY(var(--yy)); }
#mplayer:hover #btnwrap {background: linear-gradient(to top right, red, green); border-radius: 50%; opacity: .75; }
#btnwrap, #prog {position: absolute; display:grid; place-items:center; transition: .5s; }
#btnwrap { --yy: -15px; width:40px; height:40px; transform:rotate(45deg); border:1px solid tan; border-radius:6px; opacity: .25; }
#btnplay {width:20px; height:20px; transform: translateX(3px); background: #eee; clip-path: polygon(0 0, 0% 100%, 100% 50%); }
#btnpause { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; }
#prog {--yy:20px; width:100px; height:16px; border-radius:10px; background: linear-gradient(90deg, orange, red 100%, transparent 0); border: 1px solid gray; font: normal 14px / 16px sans-serif; color: #333; opacity: .75; }
#lrc { z-index:2;position: absolute; top:520px; font:bold 3.2em sans-serif; color:rgba(255,255,255,.99); text-shadow:1px 1px 1px #000; --motion: cover2; --tt: 1s; --state: running; }
#lrc::before { position:absolute; content:attr(data-lrc); width: 0; height: 100%; left: 0px; top: 0px; color: rgba(255,0,0,.9); overflow: hidden; white-space: nowrap; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }

#mpic {position: absolute; transform: rotateY(0deg); left: 0; top: 0; width: 120px; offset-distance: 0; offset-path: path("M 0 0 Q 300 150, 512 180 T 1024 110"); animation: move 8s linear infinite ;z-index : 10;}
@keyframes move { to { offset-distance: 100%; } }

#mpic1 {position: absolute; transform: rotateX(180deg); left: 0; top: 0; width: 100px; offset-distance: 0; offset-path: path("M 1024 100 Q 512 160, 300 100 T 0 0"); animation: move1 8s linear infinite ;z-index : 10;}
@keyframes move1 { to { offset-distance: 100%; } }
@keyframes bgMove1 { to { background-position: -100% 0; } }
@keyframes bgMove2 { to { background-position: -100% 0; } }

</style>

<div id="c3" class ="bk1">
<div id="c1" class ="bk2"></div>
<img id="mpic" alt="" src="https://pic.imgdb.cn/item/6330fcbb16f2c2beb143688d.gif" />
<img id="mpic1" alt="" src="https://pic.imgdb.cn/item/6330fcbb16f2c2beb143688d.gif" />

<div id="lrc" data-lrc="　　">　　</div>
<div id="mplayer">
<div id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span></div>
<div id="prog">00:00 | 00:00</div>
</div>

</div>

<script>
let mKey = 0, mSeek = false, mFlag = true, aud = new Audio();
let lrcAr = [,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,];
aud.src = 'https://music.163.com/song/media/outer/url?id=1883829929.mp3';
aud.autoplay = true;
aud.loop = true;
btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('seeked', () => calcKey());
aud.addEventListener('timeupdate', () => {
prog.style.background= 'linear-gradient(90deg, green, red ' + aud.currentTime / aud.duration * 100 + '%, snow 0)';
prog.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
for(j=0; j<lrcAr.length; j++) {
if(aud.currentTime >= lrcAr) {
if(mKey === j) showLrc(lrcAr);
else continue;
}
}
});
let mState = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none', lrc.style.setProperty('--state', 'paused')) : (btnplay.style.display = 'none', btnpause.style.display = 'block', lrc.style.setProperty('--state', 'running'));
let showLrc = (time) => {
let name = mFlag ? 'cover1' : 'cover2';
lrc.innerHTML = lrc.dataset.lrc = lrcAr;
lrc.style.setProperty('--motion', name);
lrc.style.setProperty('--tt', time + 's');
lrc.style.setProperty('--state', 'running');
mKey += 1;
mFlag = !mFlag;
};
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;
};
</script>

<script>
aud.ontimeupdate = function() {myFunction()};
function myFunction()
{
c2= aud.currentTime
switch(true) {
case c2>0 && c2<34:
document.getElementById("c1").className="bk2";
break;
case c2>34 && c2<40:
document.getElementById("c1").className="lm1";
break;
case c2>40 && c2<45:
document.getElementById("c1").className="lm2";
break;
case c2>45 && c2<51:
document.getElementById("c1").className="lm3";
break;
case c2>51 && c2<57:
document.getElementById("c1").className="lm4";
break;
case c2>57 && c2<62:
document.getElementById("c1").className="lm5";
break;
case c2>62 && c2<68:
document.getElementById("c1").className="lm6";
break;
case c2>68 && c2<80:
document.getElementById("c1").className="lm7";
break;
case c2>80 && c2<85:
document.getElementById("c1").className="lm8";
break;
case c2>85 && c2<91:
document.getElementById("c1").className="lm9";
break;
case c2>91 && c2<96:
document.getElementById("c1").className="lm10";
break;
case c2>96 && c2<102:
document.getElementById("c1").className="lm11";
break;
case c2>102 && c2<108:
document.getElementById("c1").className="lm4";
break;
case c2>108 && c2<114:
document.getElementById("c1").className="lm3";
break;
case c2>114 && c2<119:
document.getElementById("c1").className="lm10";
break;
case c2>119 && c2<148:
document.getElementById("c1").className="lm5";
break;
case c2>148 && c2<154:
document.getElementById("c1").className="lm5";
break;
case c2>154 && c2<160:
document.getElementById("c1").className="lm6";
break;
case c2>160 && c2<171:
document.getElementById("c1").className="lm7";
break;
case c2>171 && c2<177:
document.getElementById("c1").className="lm8";
break;
case c2>177 && c2<183:
document.getElementById("c1").className="lm9";
break;
case c2>183 && c2<188:
document.getElementById("c1").className="lm10";
break;
case c2>188 && c2<194:
document.getElementById("c1").className="lm11";
break;
case c2>194 && c2<200:
document.getElementById("c1").className="lm4";
break;
case c2>200 && c2<205:
document.getElementById("c1").className="lm3";
break;
case c2>205 && c2<211:
document.getElementById("c1").className="lm10";
break;
case c2>211 && c2<217:
document.getElementById("c1").className="lm5";
break;
case c2>217 && c2<222:
document.getElementById("c1").className="lm8";
break;
case c2>222 && c2<228:
document.getElementById("c1").className="lm9";
break;
case c2>228 && c2<234:
document.getElementById("c1").className="lm10";
break;
case c2>234 && c2<240:
document.getElementById("c1").className="lm11";
break;
case c2>240 && c2<245:
document.getElementById("c1").className="lm4";
break;
case c2>245 && c2<251:
document.getElementById("c1").className="lm3";
break;
case c2>251 && c2<256:
document.getElementById("c1").className="lm10";
break;
case c2>256 && c2<261:
document.getElementById("c1").className="lm5";
break;
default:
document.getElementById("c1").className="lm0";
}
}
</script>

寒冬残荷 发表于 2022-9-29 21:50

利用音乐的时间进度，按歌词词意来切换图片，达到音乐暂停，图片切换也暂停。

蓝魔发表于 2022-9-29 23:07

欣赏一下。谢谢。

195400 发表于 2022-9-30 07:46

<svg width="100%" height="100%" viewBox="0 0 1000 600"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="MyPath"
      d="
   M 200 200
   m -150, 150
   a 200,100 0 1,0 400,0
   a 200,100 0 1,1 400,0
"/>
</defs>

<use xlink:href="#MyPath" fill="none" stroke="transparent"/>

<text font-family="Verdana" font-size="50" stroke="red" fill="yellow">
<textPath xlink:href="#MyPath">
   欣赏、学习、点赞！
         <animate attributeName="startOffset" from="0" to ="1028" begin="0s" dur="10s" repeatCount="indefinite" />

</textPath>
</text>
</svg>

非常开心 发表于 2022-9-30 19:28

欣赏楼主的新作，点赞多谢分享！

195400 发表于 2022-9-30 20:01

lrc同步代码里已经有timeupdate事件处理，背景切换代码可以插入其中。

寒冬残荷 发表于 2022-10-1 10:40

195400 发表于 2022-9-30 20:01
lrc同步代码里已经有timeupdate事件处理，背景切换代码可以插入其中。

谢谢老师指点，我没动lrc处理JS代码，因为不全看懂，怕动了不小心哪怕删除了一个字母导致崩溃，我都查不出原因，所以，我自己加一个JS块。:lol

祝老师节日快乐！

寒冬残荷 发表于 2022-10-1 10:41

非常开心发表于 2022-9-30 19:28
欣赏楼主的新作，点赞多谢分享！

谢谢！祝国庆节快乐！

寒冬残荷 发表于 2022-10-1 10:41

蓝魔发表于 2022-9-29 23:07
欣赏一下。谢谢。

谢谢！祝国庆节快乐！

195400 发表于 2022-10-1 11:08

寒冬残荷发表于 2022-10-1 10:40
谢谢老师指点，我没动lrc处理JS代码，因为不全看懂，怕动了不小心哪怕删除了一个字母导致崩溃，我都查不 ...

错了怕什么无非是拷贝后再来过。

页: [1] 2

查看完整版本: 多图音画：《套马杆》