喝酒
本帖最后由 起个网名好难 于 2023-2-9 14:03 编辑 <br /><br />点击小图转大图<style>
.lrcShow{font:bold 3em 楷体;position:absolute;width:80%;height:2em;bottom:20px;left:20%;color:white;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:darkred;color:transparent;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:1000px;height:1200px;margin:80px 0 40px -200px;
display: grid;background-color:skyblue;
place-items:center;position:relative;
grid-template-rows:repeat(6, 1fr);
grid-template-columns:repeat(5, 1fr);
}
.roundGrid {
width:180px;height:180px;cursor:pointer;
}
.roundGrid img{
width:100%;height:100%;
mix-blend-mode: multiply;
}
.roundGrid span{
display:none;
}
.midGrid {
width:540px; 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;
}
.midGrid img {
width:500px; height:500px;
}
.midGrid span {
color:brown;display:block;
}
.lrcShow{
font-size:2em;bottom:200px;
}
</style>
<div id="oBlk">
<div class="lrcShow" data-lrc="点击启动播放"></div>
</div>
<script>
var lrcPlayerY=function(){return this.init.apply(this,arguments)};lrcPlayerY.prototype={constructor:lrcPlayerY,init:function(opts){lyricTxt=opts.lrcTxt.replace(/(^\s*)|(\s*$)/g,'');console.log(lyricTxt);this.audioCtrl=document.getElementById(opts.audioCtrl);this.lrcShowObj=document.querySelector('.lrcShow');this.lrcVec=this.handleLrc(lyricTxt);this.genPlayer(opts.audioURL)},handleLrc:function(lyricTxt){var parts=lyricTxt.replace(/(^\s*)|(\s*$)/g,"").split(/\r|\n|\r\n/);var lrcs=new Array();for(let index=0;index<parts.length;index++){let chkTime=parts.match(/\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,2}:\d{2}\]/g);if(chkTime){tIdx=parts.lastIndexOf(']');if(tIdx>0)lrcTxt=parts.substr(tIdx+1);for(m=0;m<chkTime.length;m++){ta=chkTime.substr(1).replace(']','').split(/:/);_0=(+ta)*60+(+ta);if(lrcs.length==0&&_0!=0){lrcs.push({seconds:0,words:'\u00A9\u0020\u0020\u4e5f\u66fe\u5e74\u8f7b'})}lrcs.push({seconds:_0,words:lrcTxt})}}}return lrcs.sort(function(a,b){return(a.seconds-b.seconds)})},showLrc:function(durTime){this.lrcShowObj.innerHTML=this.lrcShowObj.dataset.lrc=this.lrcVec.words;this.lrcShowObj.style.setProperty('--aniName','bgMove'+(this.idx%2));this.lrcShowObj.style.setProperty('--durTime',durTime+'ms');this.lrcShowObj.style.setProperty('--aniPlayState','running');this.idx++},genPlayer:function(mUrl){this.mObj=document.createElement("audio");this.mObj.loop=false;this.mObj.muted=false;this.mObj.autoplay=true;this.mObj.src=mUrl;this.lrcShowObj.appendChild(this.mObj);var that=this;var turn=0;this.idx=0;this.mObj.addEventListener('ended',function(){that.idx=0;this.play()});this.mObj.addEventListener('play',function(){that.lrcShowObj.style.setProperty('--aniPlayState','running')});this.mObj.addEventListener('pause',function(){if(that.idx==1&&this.currentTime<1){that.mObj.play();return false}that.lrcShowObj.style.setProperty('--aniPlayState','paused')});this.mObj.addEventListener('error',function(){console.log("audio wrong, remove play start event");that.lrcShowObj.style.display='none';that.lrcShowObj.removeChild(this)});this.mObj.addEventListener('timeupdate',function(){if(that.idx<that.lrcVec.length){if(this.currentTime>=that.lrcVec.seconds){if(that.idx<(that.lrcVec.length-1)){that.showLrc((that.lrcVec.seconds-that.lrcVec.seconds)*950)}else{that.showLrc((this.duration-that.lrcVec.seconds)*950)}}}});this.lrcShowObj.addEventListener('click',function(){if(that.mObj.paused){that.mObj.play()}else{that.mObj.pause()}})}}
</script>
<script>
let pics = [
["https://s1.ax1x.com/2022/12/11/zfTeuF.jpg","人在江湖走，哪能不喝酒！<br>人在江湖飘，哪能不喝高！"],
["https://s1.ax1x.com/2022/12/11/zfTVjU.jpg","过了一天缓好了，接个电话又跑了<br>忒没准了"],
["https://s1.ax1x.com/2022/12/11/zfTA3V.jpg","不想出门缓缓胃，哄哄老婆恕恕罪<br>改邪归正"],
["https://s1.ax1x.com/2022/12/11/zfTEcT.jpg","朝辞白帝彩云间，半斤八两只等闲"],
["https://s1.ax1x.com/2022/12/11/zfTk90.jpg","要想客人喝好，自家先要喝倒"],
["https://s1.ax1x.com/2022/12/11/zfTmB4.jpg","喝酒要适中，一多就发蒙<br>不是吹牛皮，就是发酒疯"],
["https://s1.ax1x.com/2022/12/11/zfTnHJ.jpg","真心朋友知肝胆，举杯不如举大碗"],
["https://s1.ax1x.com/2022/12/11/zfTKE9.jpg","大家捧你时你是个玻璃杯子<br>大家松手时你就是个玻璃渣子"],
["https://s1.ax1x.com/2022/12/11/zfTMNR.jpg","今朝有酒今朝醉，明日愁来明日愁"],
["https://s1.ax1x.com/2022/12/11/zfTQ41.jpg","人生难得几回醉，要喝一定喝到位"],
["https://s1.ax1x.com/2022/12/11/zfT19x.jpg","出门在外，老婆交待<br>少喝酒多吃菜，够不着站起来"],
["https://s1.ax1x.com/2022/12/11/zfT336.jpg","能喝一斤喝一桶，回头推举当老总"],
["https://s1.ax1x.com/2022/12/11/zfT8gK.jpg","别拉了，别闹了<br>实在不能再喝了"],
["https://s1.ax1x.com/2022/12/11/zfTGjO.jpg","酒逢知己千杯少<br>能喝多少喝多少<br>喝不了就跑"],
["https://s1.ax1x.com/2022/12/11/zfTYuD.jpg","喝酒醉一次，次次难受<br>戒酒喝一回，回回失败"],
["https://s1.ax1x.com/2022/12/11/zfqka4.jpg","酒醒了没瘾了，知道自我反省了<br>再不喝再不醉，不和朋友再聚会<br>睁眼胡说"],
["https://s1.ax1x.com/2022/12/11/zfqVi9.jpg","半斤酒不当酒，一斤酒扶墙走，<br>墙走我不走"],
["https://s1.ax1x.com/2022/12/11/zfqAIJ.jpg","不想喝，不情愿<br>没控制住，<br>老蒙圈，老断片<br>心里没数<br>吐了一马路"],
["https://s1.ax1x.com/2022/12/11/zfqFZF.jpg","男人不喝酒，交不到好朋友"]
];
let oBlk = document.querySelector('#oBlk');
for(n = 0; n < pics.length; n++) {
let divObj = document.createElement('div');
let spanObj = document.createElement('span');
let imgObj = document.createElement('img');
divObj.dataset.idx = n;
divObj.className = n == 0?'midGrid':'roundGrid';
spanObj.innerHTML = pics;
imgObj.src = pics;
divObj.appendChild(imgObj);
divObj.appendChild(spanObj);
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 = `
喝 酒
词曲唱：武衡（伍一）
编曲：阿廖
混录、和声：高永胜
（喂！拉了？家了么！赶紧往出来走么！
又做甚了？喝酒么！跟谁了？就咱呢几个，
快快接！昂、昂，拉der了？
老地方~好~好~知道兰知道兰）
今天下午没事儿干约了朋友去转一转
来到一家小酒馆儿分开人马咱战一战
要了两瓶老白干儿点了那盘豆腐干儿
边吃边喝咱边聊天说说生活里的那些事啊~
光阴一去不复返日子还要往前看
年少轻狂不明白明白已是小中年
生活总是不简单要是累了就歇一歇
不管明天是啥感觉只图此刻赛神仙
（来来来，赶紧！说你着了，快喝
说你着了么，咋接，你还养鱼了！
来，HH~ca俩个来俩哈，哥俩好兰
六六六兰，八八兰，七巧子，你喝~来！）
两瓶过后互排砍再看旁边那已打鼾
对面那个还没说完我一人在来走一关
光阴一去不复返日子还要往前看
年少轻狂不明白明白已是小中年
生活总是不简单要是累了就歇一歇
不管明天是啥感觉只图此刻赛神仙
哦~喝醉我想醉 哦~喝醉我要醉
哦~喝醉我想醉 哦~喝醉我要醉
我要的就是这种感觉~
我要的就是这种感觉~
喝醉~我要醉~喝醉~喝醉~
光阴一去不复返日子还要往前看
年少轻狂不明白明白已是小中年
生活总是不简单要是累了就歇一歇
不管明天是啥感觉只图此刻赛神仙
哦~喝醉我想醉 哦~喝醉我要醉
哦~喝醉我想醉 哦~喝醉我要醉
我要的就是这种感觉~
我要的就是这种感觉~
喝醉~我要醉~哦~~我要醉~
`;
//
var opts = {
lrcTxt:lrctxt,
audioURL:"https://www.qqmc.com/up/kwlink.php?id=172189222&.mp3",
}
new lrcPlayerY(opts);
</script> 这歌曲有趣，这些图图也很有趣，一个个点开，里面的话特别有趣{:4_173:} 放这么多图图，真不容易。这个帖子非常好，喝酒是好事，醉了难受{:4_173:} 欣赏起个网名好难好帖{:4_199:} 红影 发表于 2022-12-11 19:04
这歌曲有趣，这些图图也很有趣，一个个点开，里面的话特别有趣
红影 发表于 2022-12-11 19:09
放这么多图图，真不容易。这个帖子非常好，喝酒是好事，醉了难受
一个喝酒的系列漫画，醉酒的滋味确实不好受。 真有趣的图，感谢老师分享！{:4_191:} 梦缘 发表于 2022-12-11 19:43
真有趣的图，感谢老师分享！
https://www.huachaowang.com/forum.php?mod=attachment&aid=NDM3NTF8MGFiMGRlNzZ8MTY3MDc1OTEwNXw3NTgxfDY1MjIy&noupdate=yes 起个网名好难 发表于 2022-12-11 19:24
一个喝酒的系列漫画，醉酒的滋味确实不好受。
图片上的话特别有趣，这个大小图切换也很漂亮{:4_187:} 红影 发表于 2022-12-11 19:56
图片上的话特别有趣，这个大小图切换也很漂亮
这些图片比较合适尝试网格布局。 醉美水芙蓉 发表于 2022-12-11 22:46
老师做这个音画要花费好多时间吧！
https://www.huachaowang.com/forum.php?mod=attachment&aid=NDM3NTF8MGFiMGRlNzZ8MTY3MDc1OTEwNXw3NTgxfDY1MjIy&noupdate=yes
用的网格布局自动排列图片，歌词同步也是简化的，只能算是个很小的练习帖子。 起个网名好难 发表于 2022-12-11 22:37
这些图片比较合适尝试网格布局。
嗯，网格布局可以让它们各就各位{:4_173:} 本帖最后由 起个网名好难 于 2022-12-12 17:02 编辑
红影 发表于 2022-12-12 16:08
嗯，网格布局可以让它们各就各位
确实蛮方便，用div一个个去排也能做到只是麻烦多了。 这个帖才看见呢，制作真棒，又花了许多时间吧 起个网名好难，做个复杂的帖都一点不难{:4_170:} 谢谢精彩分享{:4_178:} 起个网名好难 发表于 2022-12-12 17:01
确实蛮方便，用div一个个去排也能做到只是麻烦多了。
这个帖子是网格布局的成功运用，很赞{:4_204:} 小辣椒 发表于 2022-12-12 18:15
这个帖才看见呢，制作真棒，又花了许多时间吧
https://www.huachaowang.com/forum.php?mod=attachment&aid=NDM3NTF8ODJlZGNlMGF8MTY3MDg0NTU3OHw3NTgxfDY1MjIy&noupdate=yes 小辣椒 发表于 2022-12-12 18:16
起个网名好难，做个复杂的帖都一点不难
这帖主要是布局，因为用了网格布局的方式就比较简单了，并不复杂。