北京胡同

起个网名好难 发表于 2023-2-10 20:53

本帖最后由起个网名好难于 2023-2-10 20:43 编辑 <br /><br /><style>
.lrcShow{font:bold 3em serif;position:absolute;width:80%;height:2em;bottom:20px;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:1100px;height:1450px;margin:80px 0 40px -260px;
display: grid;background-color:skyblue;
place-items:center;position:relative;
grid-template-rows:1370px, 80px;
grid-template-columns:100%;
box-shadow:3px 3px 8px darkgray;
overflow:hidden;border-radius:24px;
}

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

#img_area .roundGrid {
width:200px;height:180px;cursor:pointer;
margin-bottom:12px;
}
#img_area .roundGrid img{
width:100%;
}
#img_area .roundGrid span{
display:none;
}
#img_area .midGrid {
width:600px; height:720px;
grid-area: 2 / 2 / span 4 / 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:48px;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,{}))
</script>
<script>
let pics = [
["https://s1.ax1x.com/2022/12/12/z4eTjx.jpg"],
["https://s1.ax1x.com/2022/12/12/z4eog1.jpg"],
["https://s1.ax1x.com/2022/12/12/z4eI3R.jpg"],
["https://s1.ax1x.com/2022/12/12/z4e5C9.jpg"],
["https://s1.ax1x.com/2022/12/12/z4eh4J.jpg"],
["https://s1.ax1x.com/2022/12/12/z4eHu6.jpg"],
["https://s1.ax1x.com/2022/12/12/z4ebDK.jpg"],
["https://s1.ax1x.com/2022/12/12/z4eqHO.jpg"],
["https://s1.ax1x.com/2022/12/12/z4eOED.jpg"],
["https://s1.ax1x.com/2022/12/12/z4eXUe.jpg"],
["https://s1.ax1x.com/2022/12/12/z4ej4H.jpg"],
["https://s1.ax1x.com/2022/12/12/z4exCd.jpg"],
["https://s1.ax1x.com/2022/12/12/z4mCKP.jpg"],
["https://s1.ax1x.com/2022/12/12/z4mPDf.jpg"],
["https://s1.ax1x.com/2022/12/12/z4mib8.jpg"],
["https://s1.ax1x.com/2022/12/12/z4mkVS.jpg"],
["https://s1.ax1x.com/2022/12/17/zbVm7t.jpg"],
["https://s1.ax1x.com/2022/12/17/zbVuAP.jpg"],
["https://s1.ax1x.com/2022/12/17/zbVe0I.jpg"]
];

let oBlk = document.querySelector('#img_area');

for(n = 0; n < pics.length; n++) {
let divObj = document.createElement('div');
let imgObj = document.createElement('img');

divObj.dataset.idx = n;
divObj.className = n == 0?'midGrid':'roundGrid';

imgObj.src = pics;

divObj.appendChild(imgObj);
oBlk.appendChild(divObj);
}

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

for(n = 0; n < divObjs.length; n++) {
divObjs.onclick = function() {
if(this.className == "midGrid") return;
oBlk.querySelector('.midGrid').className = 'roundGrid';
this.className = "midGrid";
}
}
var lrctxt = `
北京胡同 - 王享欢
词：李幼容
曲：朱思思
弯弯曲曲的小胡同
有很多有很多
弯弯曲曲的故事
弯弯曲曲的小故事
告诉告诉我和你
每一座四合院
都有一幅看不够的画
每一扇大门都关着
都关着一个猜不出的谜
都关着一个猜不出的谜
到胡同去
到胡同去
走出高楼大厦
到小胡同去
走进爷爷奶奶的故事里
听一听老北京的回忆
悠长的回忆
深深浅浅的小胡同
有很多有很多深深浅浅的话题
深深浅浅的小话题
诉说诉说风和雨
每一个大家庭
都有一首经风雨的歌
每一个孩子都演着
都演着一出童话般的戏
都演着一出童话般的戏
哎嗨嗨哎嗨嗨
到胡同去
到胡同去
穿出鲜花霓红到小胡同去
走出弯弯曲曲的老故事
看一看新北京的美丽
迷人的美丽`;
//
var opts = {
lrcTxt:lrctxt,
audioURL:"https://www.qqmc.com/up/kwlink.php?id=28604678.mp3",
}
new lrcPlayerY(opts);

</script>

红影发表于 2023-2-10 21:41

这些图片可以一共个点击变大了来看，图片里满是老北京的回忆，那些小竹车、大铁钟，还有各种各样的日常生活，是时光的记忆，一代代的人就是在这样的环境里成长起来的{:4_187:}

红影发表于 2023-2-10 21:43

很多老旧建筑被拆除了，它们的样子还留在老北京人的记忆里。

红影发表于 2023-2-10 21:44

这首歌曲点点京韵大鼓的味道，和图图十分相配呢。欣赏老师好帖{:4_187:}

起个网名好难 发表于 2023-2-10 21:54

红影发表于 2023-2-10 21:41
这些图片可以一共个点击变大了来看，图片里满是老北京的回忆，那些小竹车、大铁钟，还有各种各样的日常生活 ...

谢谢点评！

这帖只是练习一下网格布局。

闲言不语 发表于 2023-2-10 21:58

北京胡同上海弄，至今保存有几许

醉美水芙蓉 发表于 2023-2-10 21:58

起个网名好难 发表于 2023-2-10 22:02

醉美水芙蓉发表于 2023-2-10 21:58
老师的贴子都是烧脑的！花了不少功夫吧！

谢谢点评！

原先就有个这样的帖https://www.huachaowang.com/forum.php?mod=viewthread&tid=65222&extra=

略作修改复习下网格布局。

起个网名好难 发表于 2023-2-10 22:03

闲言不语发表于 2023-2-10 21:58
北京胡同上海弄，至今保存有几许

恐怕滞留在记忆中了。

马黑黑 发表于 2023-2-10 22:13

起个网名好难发表于 2023-2-10 22:03
恐怕滞留在记忆中了。

申遗，手慢无（当心韩国人）{:4_170:}

小辣椒 发表于 2023-2-10 23:34

老头子（看看你头像好像是老头）你这种类型的制作超级棒的{:4_178:}

庶民发表于 2023-2-11 04:56

老北京的胡同，太精彩了。

起个网名好难 发表于 2023-2-11 09:43

马黑黑发表于 2023-2-10 22:13
申遗，手慢无（当心韩国人）

好建议。

上午好！

马黑黑 发表于 2023-2-11 09:44

起个网名好难发表于 2023-2-11 09:43
好建议。

上午好！

你这帖不要让韩国网友看到哈{:4_170:}

起个网名好难 发表于 2023-2-11 09:45

小辣椒发表于 2023-2-10 23:34
老头子（看看你头像好像是老头）你这种类型的制作超级棒的

就是一无所事事的老头{:5_106:}

上午好！

起个网名好难 发表于 2023-2-11 09:45

庶民发表于 2023-2-11 04:56
老北京的胡同，太精彩了。

谢谢点评。

上午好！

起个网名好难 发表于 2023-2-11 09:49

马黑黑发表于 2023-2-11 09:44
你这帖不要让韩国网友看到哈

韩国有吗？北京是基本见不到了{:5_102:}

马黑黑 发表于 2023-2-11 10:11

起个网名好难发表于 2023-2-11 09:49
韩国有吗？北京是基本见不到了

韩国什么都会有。3000亿年前，他们创造了世界。

海笑发表于 2023-2-11 10:37

欣赏老师佳作！

起个网名好难 发表于 2023-2-11 12:07

马黑黑发表于 2023-2-11 10:11
韩国什么都会有。3000亿年前，他们创造了世界。

那是那是，宇宙韩嘛{:5_106:}

页: [1] 2

花潮论坛's Archiver

北京胡同