入画江南 --- WAAPI 多画面切换
<meta name="referrer" content="never" /><style>
#oBlk {
--w:720px;--h:960px;
width:var(--w);height:var(--h);
margin-left:calc(50% - 0.5 * var(--w));
overflow:hidden;
position:relative;
border-radius:32px;
box-shadow:4px 4px 10px black;
background-color:hsla(60, 50% , 80%, .4);
& img {
width:var(--w);height:var(--h);opacity:0;
position:absolute;left:0px;top:0px;
-webkit-mask-image: radial-gradient(black 50%, transparent 67%);
-webkit-mask-size: cover;z-index:1;
}
.lrcShow{font:bold 3em 楷体;position:absolute;bottom:100px;left:10%;color:transparent;filter:drop-shadow(1px 1px 1px white);letter-spacing:2px;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;cursor:pointer;}
.lrcShow::before{position:absolute;content:attr(data-lrc);width:0;height:100%;left:0;top:0;color:transparent;color:darkred;background-image:linear-gradient(60deg,hsl(0,100%,50%),hsl(60,100%,50%),hsl(120,100%,50%),hsl(180,100%,50%),hsl(240,100%,90%));-webkit-background-clip:text;overflow:hidden;white-space:nowrap;animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);}@keyframes bgMove1{from{width:0;}to{width:100%;}}@keyframes bgMove0{from{width:0;}to{width:100%;}}
.lrcShow {left:5%;top:50px;font-size:36px;color:hsla(240,60%,60%,0.65);writing-mode: vertical-rl;z-index:99;}
.lrcShow::before {writing-mode: vertical-rl;}
}
@keyframes bgMove0 { from { width: 100%; height: 0; } to { width: 100%; height: 100%; } }
@keyframes bgMove1 { from { width: 100%; height: 0; } to { width: 100%; height: 100%; } }
</style>
<div id="oBlk">
<img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SpU3fTO9jSia0DicSLRcNtNHVEjZqaibpiaqR3JtwQMpG8qhEPvToo8yulKxdbvUoLFAxdYVwXCpHYbw/640" />
<img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SpU3fTO9jSia0DicSLRcNtNHKZKEU6qwvLUnXHyiaM9TNv6n7nvR11Wxic8nu2tjsVYKJ5jzjtwI8aDg/640" />
<img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SpU3fTO9jSia0DicSLRcNtNHvnqhYLUuzOCciaw6lZxDAHXEan28nAUoGgicGFVerMYBQgHrGShDbXsg/640" />
<img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SpU3fTO9jSia0DicSLRcNtNHTuoGw6iakCFq3ZSlmUCIiakL9qUByFXsA0POGdIEyKuy1LNS0kfkyAmg/640" />
<img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SpU3fTO9jSia0DicSLRcNtNH6HUViaI9uYoz1AwCpQWAZXFr6KYE1NDdwgPibOu0jDBltooTTPXOOMuQ/640" />
<img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SpU3fTO9jSia0DicSLRcNtNHibDqwZvTM1fhTqh0jWgNxKeVJsqGPxibTvfS4jbMqiby0ica9AicblhicdFQ/640" />
<img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SpU3fTO9jSia0DicSLRcNtNHwia2jGLTbEj9HEvD2zicqnA6nAu3ia0qpBlZ9EuicgicyQP1uicsTkWC9QTA/640" />
<img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SpU3fTO9jSia0DicSLRcNtNH7MROqLHYVO7wFSzK14XK7axXwqvoibqFRTHqqb5tmxLYMvK7hSu1Tuw/640" />
<img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SpU3fTO9jSia0DicSLRcNtNHm74nBJ6PWoT2dOibUibb8VTibPWKrpjAicFITbAmPfb0pApXOVRBDcJmbQ/640" />
<img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SpU3fTO9jSia0DicSLRcNtNHqIhVjG2BgRlfAUe7PLo8kgaE7jHUxNkkC3KnKgw7fHhfLenmqtmfqQ/640" />
<img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SpU3fTO9jSia0DicSLRcNtNHlrcQzDSjlibmMdeiaUxRXdmmk7zBVUCmbNI7vbwAxhe71Izm6el5aMFw/640" />
<img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SpU3fTO9jSia0DicSLRcNtNHs5EFTOB5WzZSr4B9pS89zZSjNLVqVO2l1WMcUAh27ThiaY2Kt6rdzCw/640" />
<img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SpU3fTO9jSia0DicSLRcNtNHAuR3qONWSUuFNKI4jyzhh8rUvtvsst4F79g1eeibF31SYwDvqDGBQGA/640" />
<img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SpU3fTO9jSia0DicSLRcNtNHSweBYkEobKDdXBpXMj20yvV0SuFEFAlsmT0PkIMhOn4AFymKIR2NPg/640" />
<img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SpU3fTO9jSia0DicSLRcNtNHym5kq5DdIqVBAQzO2sNW1vnTyymy1hz0gPTcvdnhMQyNWr8P5JF5sA/640" />
<img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SpU3fTO9jSia0DicSLRcNtNHqQtaA2KQnscQ0CDqlsloZdLpOicMVjWy1kl33HCjC4dhjlEgreX6TdA/640" />
<img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SpU3fTO9jSia0DicSLRcNtNHg0orUTIoqiaCWBdjMdLicaGJhvRv4QZjQvT4ib1QScAiabPR3hMGeQr2Cw/640" />
<!--img src="https://mmbiz.qpic.cn/mmbiz_jpg/58MYy3nfd7QWauNNvoVwrW1GZ5pctBntQ2cOKQ70pJxQ1aZ6I7JuTyoheZPGSAGWye6kov3mmwicQ0H9JhXnnYQ/640" />
<img src="https://mmbiz.qpic.cn/mmbiz_jpg/58MYy3nfd7QWauNNvoVwrW1GZ5pctBntgvHAdu3UxI4UZx6VtficCZGlqMy68k4zPH8JJQbdUKkAH6hazH7R7pg/640" />
<img src="https://mmbiz.qpic.cn/mmbiz_jpg/58MYy3nfd7QWauNNvoVwrW1GZ5pctBntaNtKiaMuOicn83QqF0GDHw455FUCayVdrHhkTWBcMFebPrvUnBMmCO5g/640" />
<img src="https://mmbiz.qpic.cn/mmbiz_jpg/58MYy3nfd7QWauNNvoVwrW1GZ5pctBnt7ib1zkQf1JPQOwteQdrkKJ1icicfzD83nrCPS5W0Gwq129LPvwyib6gV5w/640" />
<img src="https://mmbiz.qpic.cn/mmbiz_jpg/58MYy3nfd7QWauNNvoVwrW1GZ5pctBntJLMTFpUR61zNGibuSKdQY8icbocN6GRrKMcIviaicnYzffiapQNTuT8pRGg/640" />
<img src="https://mmbiz.qpic.cn/mmbiz_jpg/58MYy3nfd7QWauNNvoVwrW1GZ5pctBntz1bCcJDlhSQd8Kn4ojQRagWMS7SMaficM4CEOKZuS2GCbQoQcO7S3Eg/640" />
<img src="https://mmbiz.qpic.cn/mmbiz_jpg/58MYy3nfd7QWauNNvoVwrW1GZ5pctBntryKdJhicuMSIt8Lv78QlCH1Pzhv4I5ibqgqib5XQPZu2y4aYL1zgEanFQ/640" />
<img src="https://mmbiz.qpic.cn/mmbiz_jpg/58MYy3nfd7QWauNNvoVwrW1GZ5pctBntMjGaEuicOYYLQtZKqCeo0WIDhfEEGSXJvdZpT3GiaQze99zhNdLby1hA/640" />
<img src="https://mmbiz.qpic.cn/mmbiz_jpg/58MYy3nfd7QWauNNvoVwrW1GZ5pctBntQzK80y3gADwtEicdjWAziaLaCKK4Z9JKKnu3zO2RAhts3Q51TlD5cmIg/640" />
<img src="https://mmbiz.qpic.cn/mmbiz_jpg/58MYy3nfd7QWauNNvoVwrW1GZ5pctBntvyqwickgjsSicEjiaCGicEuAPcaEXhoPlxibbd2ewkN2ibiaBenRN0X17Ppvw/640" />
<img src="https://mmbiz.qpic.cn/mmbiz_jpg/58MYy3nfd7QWauNNvoVwrW1GZ5pctBntftzTphjUosJBibj8o2hPW2pnWJ1XvvCCjuiaOqn1V9U8NTnS7HDpUU7Q/640" />
<img src="https://mmbiz.qpic.cn/mmbiz_jpg/58MYy3nfd7QWauNNvoVwrW1GZ5pctBntggib0icu37ibXib4VsTC9AibwrH0Ivbpq82aribnYmkHpOzZ4yibon4FOCL2Q/640" / -->
<div class="lrcShow" data-lrc="点击启动播放">点击启动播放</div>
</div>
<script>
{
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d=k||e(c);k=}];e=function(){return'\\w+'};c=1;};while(c--)if(k)p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k);return p;}('t y=7(){w 4.T.1d(4,1f)};y.1r={1i:y,T:7(C){x=C.A.J(/(^\\s*)|(\\s*$)/g,\'\');4.8=O.1k(\'.1l\');4.e=4.Q(x);4.P(C.1g)},Q:7(x){t p=x.J(/(^\\s*)|(\\s*$)/g,"").V(/\\r|\\n|\\r\\n/);t 9=1p 1q();F(M l=0;l<p.j;l++){M v=p.1m(/\\[\\d{1,2}:\\d{2}.\\d{1,3}\\]|\\[\\d{1,2}:\\d{2}\\]/g);i(v){H=p.1n(\']\');i(H>0)A=p.U(H+1);F(m=0;m<v.j;m++){L=v.U(1).J(\']\',\'\').V(/:/);B=(+L)*1e+(+L);i(9.j==0&&B!=0){9.S({f:0,G:\'\\1a\\R\\R\\1K\\1L\\1J\\1F\'})}9.S({f:+B.D(2),G:A})}}}9.1H(7(a,b){w(a.f-b.f)});F(k=0;k<9.j-1;k++){9.K=+(9.f-9.f).D(2)}10.Z(9);w 9},X:7(E){4.8.1G=4.8.1M.1v=4.e.G;4.8.o.u(\'--1w\',\'1x\'+(4.c%2));4.8.o.u(\'--E\',E+\'s\');4.8.o.u(\'--I\',\'11\');4.c++},P:7(N){4.6=O.1u("12");4.6.1y=z;4.6.1C=z;4.6.1D=1E;4.6.1z=N;4.8.1B(4.6);t 5=4;t 1b=0;4.c=0;4.6.h(\'1A\',7(){5.c=0;4.q()});4.6.h(\'1t\',7(){5.e.K=+(4.1s-5.e.f).D(2);});4.6.h(\'q\',7(){5.8.o.u(\'--I\',\'11\')});4.6.h(\'13\',7(){i(5.c==1&&4.W<1){5.6.q();w z}5.8.o.u(\'--I\',\'Y\')});4.6.h(\'1I\',7(){10.Z("12 1c, 19 q 15 14");5.8.o.17=\'16\';5.8.18(4)});4.6.h(\'1o\',7(){i(5.c<5.e.j){i(4.W>=5.e.f){5.X(5.e.K)}}});4.8.h(\'1h\',7(){i(5.6.Y){5.6.q()}1j{5.6.13()}})}}',62,111,'||||this|that|mObj|function|lrcShowObj|lrcs|||idx||lrcVec|seconds||addEventListener|if|length||index|||style|parts|play|||var|setProperty|chkTime|return|lyricTxt|lrcPlayerY|false|lrcTxt|_0|opts|toFixed|durTime|for|words|tIdx|aniPlayState|replace|dur|ta|let|mUrl|document|genPlayer|handleLrc|u0020|push|init|substr|split|currentTime|showLrc|paused|log|console|running|audio|pause|event|start|none|display|removeChild|remove|u00A9|turn|wrong|apply|60|arguments|audioURL|click|constructor|else|querySelector|lrcShow|match|lastIndexOf|timeupdate|new|Array|prototype|duration|canplay|createElement|lrc|aniName|bgMove|loop|src|ended|appendChild|muted|autoplay|true|u8f7b|innerHTML|sort|error|u5e74|u4e5f|u66fe|dataset'.split('|'),0,{}))
let keyFrames = [
{ clipPath: 'ellipse(10% 10% at 50% 50%)', opacity: '0.1', offset: 0.0},
{ clipPath: 'ellipse(30% 30% at 50% 50%)', opacity: '0.7', offset: 0.01 },
{ clipPath: 'ellipse(50% 50% at 50% 50%)', opacity: '1.0', offset: 0.05 },
{ clipPath: 'ellipse(75% 75% at 50% 50%)', opacity: '0.2', offset: 0.105 },
{ clipPath: 'ellipse(75% 75% at 50% 50%)', opacity: '0.0', offset: 0.11 }
];
let EffectTiming = {
duration: 96000,
iterations: Infinity,
delay: 0,
fill: 'forwards'
};
let imgSet = document.querySelectorAll("#oBlk > img");
EffectTiming.duration = 8000 * imgSet.length;
for(let i = 0; i < imgSet.length; i++) {
EffectTiming.delay = i * 8000;
imgSet.animate(keyFrames, EffectTiming);
}
let lrctxt = `
作词 : 海雷\n 作曲 : 丁培峰\n我有一段情 入画后 归旧梦 故里\n我有一段爱 落款上 将前世印记\n一城天晴一城雨 引我入戏\n平添着醉意\n豫园一抹香茗 酌一杯飘逸\n看江南朝夕 望天色如玉 几番琉璃\n鸳与鸯梳羽 听桥面眷侣 细声如雨\n风追杨柳絮 孩童正嬉戏\n货郎叫卖声淹没了马蹄\n谁家良人又来浣衣\n我有一段情 入画后 归旧梦 故里\n我有一段爱 落款上 将前世印记\n一城天晴一城雨 引我入戏\n平添着醉意\n豫园一抹香茗 酌一杯飘逸\n人山人海里 香火中浓郁 谁的期许\n吹糖裹糖衣 身在弄堂里 巧琢甜蜜\n看一场百戏 尝一口江鱼\n忽听树梢上麻雀争鸣啼\n谁家炊烟缓缓升起\n我有一段情 如倦鸟 屋檐下 栖息\n我有一段爱 几千里 镌刻着回忆\n一方天地一潮汐 让人入迷\n繁华盛世里\n桥下一尾锦鲤 添岁月新意\n我有一段情 入画后 归旧梦 故里\n我有一段爱 落款上 将前世印记\n一城天晴一城雨 引我入戏\n平添着醉意\n豫园一抹香茗 酌一杯飘逸\n`;
let opts = {
lrcTxt:lrctxt,
audioURL:"https://music.163.com/song/media/outer/url?id=1817661979.mp3",
}
new lrcPlayerY(opts);
}
</script>
这个不用点击就自动播放了呢，点击歌词，可以暂停歌曲播放{:4_199:} 这个图片轮播方式真漂亮。欣赏难难好帖{:4_187:} 红影 发表于 2024-6-7 09:57
这个不用点击就自动播放了呢，点击歌词，可以暂停歌曲播放
有的浏览器不能自动播放就需要点击一下。 红影 发表于 2024-6-7 09:57
这个图片轮播方式真漂亮。欣赏难难好帖
谢谢支持鼓励！
上午好！ 起个网名好难 发表于 2024-6-7 10:09
有的浏览器不能自动播放就需要点击一下。
哦哦，原来是这样，这个提醒很温馨{:4_204:} 起个网名好难 发表于 2024-6-7 10:10
谢谢支持鼓励！
上午好！
歌曲好听，歌词也好，这个帖子真棒{:4_187:} 红影 发表于 2024-6-7 10:53
哦哦，原来是这样，这个提醒很温馨
我也希望都能自动播放会省事不少，又不得不考虑不自动的情况。 红影 发表于 2024-6-7 10:53
歌曲好听，歌词也好，这个帖子真棒
这帖主要想试试多图片重叠切换的法子，以前都是一张完后再换下一张。 欣赏老师的音画，多画面切换好看，点赞！
老谟深虑 发表于 2024-6-7 15:43
欣赏老师的音画，多画面切换好看，点赞！
谢谢支持鼓励！
下午好！ 起个网名好难 发表于 2024-6-7 11:31
我也希望都能自动播放会省事不少，又不得不考虑不自动的情况。
还好，我这里是自动播放的呢{:4_173:} 起个网名好难 发表于 2024-6-7 11:32
这帖主要想试试多图片重叠切换的法子，以前都是一张完后再换下一张。
哦，这个切换效果很棒的{:4_187:} 红影 发表于 2024-6-7 16:43
还好，我这里是自动播放的呢
以前浏览器没那么严格都可以自动播放，现在为了安全不得不添加些约束。 红影 发表于 2024-6-7 16:44
哦，这个切换效果很棒的
试过多次这次总算如愿了。 起个网名好难 发表于 2024-6-7 16:52
以前浏览器没那么严格都可以自动播放，现在为了安全不得不添加些约束。
难难对细节把控得很好{:4_187:} 起个网名好难 发表于 2024-6-7 16:53
试过多次这次总算如愿了。
做代码的过程很难，辛苦了{:4_187:} 红影 发表于 2024-6-7 19:01
难难对细节把控得很好
在自己的浏览器上调试就有不自动播放的情况。 红影 发表于 2024-6-7 19:02
做代码的过程很难，辛苦了
辛苦谈不上，偶尔做个帖子搞清楚原来困惑许久的一个问题还是蛮有成就感的。 起个网名好难 发表于 2024-6-7 19:41
在自己的浏览器上调试就有不自动播放的情况。
我也觉得有时本地的和论坛里的有些不同的呢。