起个网名好难 发表于 2024-1-11 13:57

江南水乡 --- 王莉


<meta name="referrer" content="never" />
<style>
.lrcShow{font:bold 3em serif;position:absolute;width:80%;height:2em;bottom:5px;left:20%;color:hsl(60,100%,40%);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%;}}
#oBlk        {
        width:800px;height:1150px;margin:auto;
        display: grid;background-color:skyblue;
        place-items:center;position:relative;
        grid-template-rows:1100px, 80px;
        grid-template-columns:100%;
        box-shadow:3px 3px 8px darkgray;
        overflow:hidden;border-radius:24px;
        font-size:12px;padding:10px;
}

#img_area        {
        width:100%;height:100%;
        display: grid;place-items:center;
        grid-template-rows:repeat(5, 1fr);
        grid-template-columns:repeat(5, 1fr);
}
#img_area img        {overflow:hidden; border-radius:5%;}

#img_area .roundGrid        {
        width:144px;height:192px;cursor:pointer;
        margin-bottom:8px;
}
#img_area .roundGrid img{
        width:100%;
}
#img_area .roundGrid span{
        display:none;
}
#img_area .midGrid        {
        width:450px; height:600px;
        grid-area: 2 / 2 / span 3 / span 3 ;
/***************************************
    grid-column-start: 2;
        grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: 6;
***************************************/
        display:grid;
        place-items:center;
}
#img_area .midGrid img        {
        width:100%;
}
#lrc_area        {
    grid-column-start: 1;
        grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
        display: grid;place-items:center;
}
.lrcShow{
        font-size:36px;bottom:0px;font-family:楷体;
}
</style>
<!--
-->
<div id="oBlk">
<div id="img_area"></div>
<div id="lrc_area"><div class="lrcShow" data-lrc="点击启动播放"></div></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;}('l E=8(){x 4.W.1G(4,17)};E.16={1a:E,W:8(w){q=w.F.I(/(^\\s*)|(\\s*$)/g,\'\');U.T(q);4.10=B.1g(w.10);4.7=B.1i(\'.1f\');4.e=4.Y(q);4.O(w.1c)},Y:8(q){l k=q.I(/(^\\s*)|(\\s*$)/g,"").N(/\\r|\\n|\\r\\n/);l t=1d 1j();P(K h=0;h<k.o;h++){K v=k.1e(/\\[\\d{1,2}:\\d{2}.\\d{1,3}\\]|\\[\\d{1,2}:\\d{2}\\]/g);f(v){A=k.1b(\']\');f(A>0)F=k.R(A+1);P(m=0;m<v.o;m++){J=v.R(1).I(\']\',\'\').N(/:/);H=(+J)*1h+(+J);f(t.o==0&&H!=0){t.L({c:0,D:\'\\15\\Q\\Q\\19\\18\\14\\1K\'})}t.L({c:H,D:F})}}}x t.1H(8(a,b){x(a.c-b.c)})},G:8(C){4.7.1A=4.7.1D.1B=4.e.D;4.7.i.p(\'--1E\',\'1F\'+(4.9%2));4.7.i.p(\'--C\',C+\'1C\');4.7.i.p(\'--y\',\'Z\');4.9++},O:8(M){4.6=B.1L("S");4.6.1M=z;4.6.1I=z;4.6.1J=1p;4.6.1o=M;4.7.1r(4.6);l 5=4;l 1q=0;4.9=0;4.6.j(\'1l\',8(){5.9=0;4.u()});4.6.j(\'u\',8(){5.7.i.p(\'--y\',\'Z\')});4.6.j(\'12\',8(){f(5.9==1&&4.V<1){5.6.u();x z}5.7.i.p(\'--y\',\'13\')});4.6.j(\'1k\',8(){U.T("S 1n, 1m u 1x 1w");5.7.i.1z=\'1y\';5.7.1t(4)});4.6.j(\'1s\',8(){f(5.9<5.e.o){f(4.V>=5.e.c){f(5.9<(5.e.o-1)){5.G((5.e.c-5.e.c)*X)}11{5.G((4.1v-5.e.c)*X)}}}});4.7.j(\'1u\',8(){f(5.6.13){5.6.u()}11{5.6.12()}})}}',62,111,'||||this|that|mObj|lrcShowObj|function|idx|||seconds||lrcVec|if||index|style|addEventListener|parts|var|||length|setProperty|lyricTxt|||lrcs|play|chkTime|opts|return|aniPlayState|false|tIdx|document|durTime|words|lrcPlayerY|lrcTxt|showLrc|_0|replace|ta|let|push|mUrl|split|genPlayer|for|u0020|substr|audio|log|console|currentTime|init|950|handleLrc|running|audioCtrl|else|pause|paused|u5e74|u00A9|prototype|arguments|u66fe|u4e5f|constructor|lastIndexOf|audioURL|new|match|lrcShow|getElementById|60|querySelector|Array|error|ended|remove|wrong|src|true|turn|appendChild|timeupdate|removeChild|click|duration|event|start|none|display|innerHTML|lrc|ms|dataset|aniName|bgMove|apply|sort|muted|autoplay|u8f7b|createElement|loop'.split('|'),0,{}))

let pics = [
"https://img.jianpian.info/14592807/article/20240110/aac29e3c5cb54697b022cb17d1eb602c.jpg" ,
"https://img.jianpian.info/14592807/article/20240110/b4c7831cc1c74c66af21c649fa38ac43.jpg" ,
"https://img.jianpian.info/14592807/article/20240110/5746560bba07428ea951e718d4d7a2be.jpg" ,
"https://img.jianpian.info/14592807/article/20240110/12ea74da24f84c9696a537be97ee692f.jpg" ,
"https://img.jianpian.info/14592807/article/20240110/8e394a765fda46c39dfa389557871d7d.jpg" ,
"https://img.jianpian.info/14592807/article/20240110/38e4103896c34595b25d9b58c37de3d4.jpg" ,
"https://img.jianpian.info/14592807/article/20240110/f3d91f4bec7947568007ca5340583734.jpg" ,
"https://img.jianpian.info/14592807/article/20240110/202e6b07553540ce93f653af2a95711b.jpg" ,
"https://img.jianpian.info/14592807/article/20240110/47c4e713751d4028bdbcdd98e6b9e8bb.jpg" ,
"https://img.jianpian.info/14592807/article/20240110/df8f412c58234cd1a7154762735183aa.jpg" ,
"https://img.jianpian.info/14592807/article/20240110/ad017b34949943ecb5f5f2b9c63902b4.jpg" ,
"https://img.jianpian.info/14592807/article/20240110/1569e158909e4812840c939d29be8db6.jpg" ,
"https://img.jianpian.info/14592807/article/20240110/acb6898e77ee4730aefc01b4b98aa9d4.jpg" ,
"https://img.jianpian.info/14592807/article/20240110/715b9bbf3b054b08896b858e7e5bd883.jpg" ,
"https://img.jianpian.info/14592807/article/20240110/afe52140716346fdbb0d02e0e8d8ab99.jpg" ,
"https://img.jianpian.info/14592807/article/20240110/46a2c66e30c04547bc18718bdf03a399.jpg"
];

let oBlk = document.querySelector('#img_area');
        let divObj = document.createElement('div');
        let imgObj = document.createElement('img');
       
        divObj.className = 'midGrid';
       
        imgObj.src = pics;
        imgObj.alt = '';
       
        divObj.appendChild(imgObj);
        oBlk.appendChild(divObj);
let mIdx = 0;

for(n = 0; n < pics.length; n++)        {
        let divObj = document.createElement('div');
        let imgObj = document.createElement('img');
       
        divObj.className = 'roundGrid';
       
        imgObj.src = pics;
        imgObj.dataset.idx = n;
        imgObj.alt = '';
       
        divObj.appendChild(imgObj);
        oBlk.appendChild(divObj);
}

let divObjs = oBlk.querySelectorAll('.roundGrid');

for(n = 0; n < divObjs.length; n++)        {
        divObjs.onclick = function(e)        {
                oBlk.querySelector('.midGrid img').src = e.target.src;
                mIdx = e.target.dataset.idx;
                console.log(mIdx);
        }
}
let pic_loop = () => {
        mIdx++;
        mIdx >= divObjs.length? mIdx = 0 : mIdx;
        oBlk.querySelector('.midGrid img').src = divObjs.querySelector('img').src;
}
setInterval(pic_loop, 10000);
var 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粉嘟嘟的船娘\n\n仿佛幽梦弥漫唐宋清香\n染你一身芬芳\n\n花桥碧水弯\n江堤柳丝长\n微风轻吻荷塘\n醉我江南水乡\n\n竹篙轻轻点\n小船入画廊\n一曲丝竹小唱\n\n醉我江南水乡\n\n水乡\n\n水乡\n`;
//       
var opts = {
    lrcTxt:lrctxt,
    audioURL:"https://music.163.com/song/media/outer/url?id=455345728.mp3",
}
new lrcPlayerY(opts);
}
</script>

起个网名好难 发表于 2024-1-11 13:57

小图片每10秒依次倒换到中间，或点击小图片也可以切换。

冬天的雨 发表于 2024-1-11 16:35

精美的代码帖{:4_199:}

冬天的雨 发表于 2024-1-11 16:35

漂亮的，图片自动10秒转换，制作太好了{:4_199:}

醉美水芙蓉 发表于 2024-1-11 16:45

起个网名好难 发表于 2024-1-11 16:51

冬天的雨 发表于 2024-1-11 16:35
精美的代码帖

https://tse3-mm.cn.bing.net/th/id/OIP-C.iWQOtYPYINw516BhIE93NAHaE_

起个网名好难 发表于 2024-1-11 16:52

醉美水芙蓉 发表于 2024-1-11 16:45
老师素材选得漂亮！

https://tse3-mm.cn.bing.net/th/id/OIP-C.iWQOtYPYINw516BhIE93NAHaE_

起个网名好难 发表于 2024-1-11 16:52

冬天的雨 发表于 2024-1-11 16:35
漂亮的，图片自动10秒转换，制作太好了

感谢支持鼓励！

亦是金 发表于 2024-1-11 17:18

好漂亮的帖子，谢谢老师分享！欣赏学习了！{:4_190:}

马黑黑 发表于 2024-1-11 17:37

恢弘的气势，锐不可当。音乐偏小声。

起个网名好难 发表于 2024-1-11 18:10

亦是金 发表于 2024-1-11 17:18
好漂亮的帖子，谢谢老师分享！欣赏学习了！

https://tse3-mm.cn.bing.net/th/id/OIP-C.iWQOtYPYINw516BhIE93NAHaE_

起个网名好难 发表于 2024-1-11 18:13

马黑黑 发表于 2024-1-11 17:37
恢弘的气势，锐不可当。音乐偏小声。

https://tse3-mm.cn.bing.net/th/id/OIP-C.iWQOtYPYINw516BhIE93NAHaE_

不知设置 volume 可不可以使声音大点

樵歌 发表于 2024-1-11 19:01

以后凡写到江南的字就用来作素材，可否？

樵歌 发表于 2024-1-11 19:01

必须{:4_176:}

起个网名好难 发表于 2024-1-11 19:29

樵歌 发表于 2024-1-11 19:01
以后凡写到江南的字就用来作素材，可否？

不好意思没明白你的意思{:5_102:}

起个网名好难 发表于 2024-1-11 19:29

樵歌 发表于 2024-1-11 19:01
必须

晚上好！

红影 发表于 2024-1-11 19:35

好美的江南组图，还能切换。这个制作太美了。欣赏难难好帖{:4_199:}

红影 发表于 2024-1-11 19:36

起个网名好难 发表于 2024-1-11 19:29
不好意思没明白你的意思

他是说以后写文字时，写到江南话题，可否来你这里借用图片{:4_173:}

起个网名好难 发表于 2024-1-11 20:20

红影 发表于 2024-1-11 19:35
好美的江南组图，还能切换。这个制作太美了。欣赏难难好帖

https://tse3-mm.cn.bing.net/th/id/OIP-C.iWQOtYPYINw516BhIE93NAHaE_

起个网名好难 发表于 2024-1-11 20:21

红影 发表于 2024-1-11 19:36
他是说以后写文字时，写到江南话题，可否来你这里借用图片

那有什么问题，我用的图片都是网上找来的也不是我自己的。
页: [1] 2 3 4
查看完整版本: 江南水乡 --- 王莉