家和万事兴（纪念国际家庭日）
本帖最后由 梦江南 于 2025-5-14 13:53 编辑 <br /><br /><style type="text/css">@import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);
/** 不满意一般设置也可以调整下 */
.lrcShow {
font: normal 2.5em 微软雅黑;
pointer-events:none;
filter: drop-shadow(1px 0px 0px white) drop-shadow(-1px 0px 0px white) drop-shadow(0px 1px 0px white) drop-shadow(0px -1px 0px white);
z-index:99;left:40%;bottom:-10px;color:hsla(240,60%, 90%, 0.7);
}
#oBlk {
width:1422px;height:780px; position: relative; margin:90px 0 40px calc(50% - 792px);
background: #87CEFA ;
padding:16px;
overflow:hidden;
border-radius:36px;
box-shadow:3px 3px 6px darkgray;
}
#showSVG {position:absolute; left:0px;top:0px;width:100%;height:110%;}
#processMeter {position: absolute; left:3%; bottom:5px; width: 160px; height:80px; cursor: pointer; z-index:999;}
#mCtrl{transform-origin:50%;animation:rot 5s linear infinite var(--rState);}
@keyframes rot{to{transform: rotate(1turn)}}
</style>
<div id="oBlk">
<div id="showSVG"></div>
<div id="processMeter">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" id="svgObj">
<defs>
<clipPath id="clip">
<circle cx="100" cy="50" r="35" />
</clilpPath>
</defs>
<image xlink:href="https://img4.oldkids.cn/upload/2025/05/13/mb_0_20250513155447225.jpg" width="100" height='100' x="50" y="0" id="mCtrl" clip-path="url(#clip)" preserveAspectRatio="none" />
<g fill='none' stroke-width='5'>
<path d="M 40 97 C -120 -25,330 -25, 150 97" stroke="lightgray" id="bgc"></path>
<path d="M 40 97 C -120 -25,330 -25, 150 97" stroke="pink" id="fgc"></path>
</g>
<g text-anchor="middle" dominant-baseline="middle" fill="red" style="font-size:16px;">
<text x="82%" y="55%" id="durTime">00:00</text>
<text x="18%" y="55%" id="curTime">00:00</text>
</g>
</svg>
</div>
<divclass="lrcShow" data-lrc='家和万事兴'></div>
</div>
<script type="text/javascript">
var sf0 = document.createElement('script');
sf0.type = 'text/javascript';
sf0.src = "https://file.uhsea.com/2410/739c572b5176f670f350463cf9ade957QB.js";
sf0.charset = "utf-8";
document.body.appendChild(sf0);
sf0.onload = () => {
let pics = [
"https://img3.oldkids.cn/upload/2025/05/14/blog_260798238_20250514102317062.jpeg",
"https://img2.oldkids.cn/upload/2025/05/14/blog_260798238_20250514102401910.jpeg",
"https://img3.oldkids.cn/upload/2025/05/14/blog_260798238_20250514102601440.jpeg",
"https://img4.oldkids.cn/upload/2025/05/14/blog_260798238_20250514102643775.jpeg",
"https://img1.oldkids.cn/upload/2025/05/14/blog_260798238_20250514113118602.jpeg",
"https://img2.oldkids.cn/upload/2025/05/14/blog_260798238_20250514113945246.jpg"
];
function genTagObj(parentNode,jsonData){let sObj=document.createElementNS("http://www.w3.org/2000/svg",jsonData.tag);for(let key in jsonData){if(key==='tag'){continue}else if(jsonData.hasOwnProperty(key)){sObj.setAttribute(key,jsonData)}};if(parentNode)parentNode.appendChild(sObj);return sObj};
let mysvg = genTagObj(null ,{'tag':'svg', 'id':'sObj', 'xmlns:xlink':"http://www.w3.org/1999/xlink" ,'xmlns':"http://www.w3.org/2000/svg", 'viewBox':`0 0 1422 800`});
pics.forEach((pic, idx) => {
let beginStr = idx == 0 ? `0;ep${pics.length-1}.end-1.5` : `ep${idx-1}.end-1.5`;
let imgObj = genTagObj(mysvg,{'tag':'image','id':`p${idx}`, 'xlink:href':pic, 'width':1422, 'height':800, 'x':0, 'y':0, 'opacity':0, 'preserveAspectRatio':'none'});
let aniObj = genTagObj(imgObj,{'tag':'animate','id':`bp${idx}`, 'attributeName':'opacity', 'from':0, 'to':1, 'dur':3, 'begin':beginStr, 'fill':'freeze'});
aniObj = genTagObj(imgObj,{'tag':'animate','id':`ep${idx}`, 'attributeName':'opacity', 'from':1, 'to':0, 'dur':3, 'begin':`bp${idx}.begin+10`, 'fill':'freeze'});
});
showSVG.innerHTML = mysvg.outerHTML;
const lrc =`家和万事兴 (单曲) - 龚玥
歌词由 www.33VE.com 提供
老祖宗留下一句话
家和万事兴万事兴
妻贤福星广
母慈儿孝敬
众人拾柴火焰高
十指抱拳礼千斤
老百姓流传一句话
国安享太平享太平
国强民才富
民富国安定
大河涨水小河满
众人载树树成林
老百姓啊就认这个理
家和万事兴万事兴
中国人哪都兴这个理
国安享太平享太平
LRC：梦江南
老祖宗留下一句话
家和万事兴万事兴
妻贤福星广
母慈儿孝敬
众人拾柴火焰高
十指抱拳礼千斤
老百姓流传一句话
国安享太平享太平
国强民才富
民富国安定
大河涨水小河满
众人载树树成林
老百姓啊就认这个理
家和万事兴万事兴
中国人哪都兴这个理
国安享太平享太平
老百姓啊就认这个理
家和万事兴万事兴
中国人哪都兴这个理
国安享太平享太平
`;
var opts = {
lrcTxt:lrc,
audioCtrl:'mDisk',
// 歌曲MP3链接放这里
//aaaudioURL:'https://cccimg.com/view.php/a2d9ef2954da852d75f1895352b61ac3.mp3'
audioURL:'https://cccimg.com/view.php/a2d9ef2954da852d75f1895352b61ac3.mp3'
};
let lrcPlayer = new lrcPlayerY(opts);
// 格式化时间数据
let formatTime = (time) => {
let min = ('' + parseInt(time / 60)).padStart(2,'0');
let sec = ('' + parseInt(time % 60)).padStart(2,'0');
return (`${min}:${sec}`);
};
// 计算/设置控制路径有关的数据
let circlePoints = [];
let bgcLen = bgc.getTotalLength();
fgc.style.strokeDasharray = bgc.style.strokeDasharray = bgcLen;
for(let i = 0; i < bgcLen; i++) {
circlePoints.push(bgc.getPointAtLength(i));
}
// 在 timeupdate 事件处理中添加与控制路径有关的处理
lrcPlayer.mObj.addEventListener('timeupdate', function() {
let processValue = lrcPlayer.mObj.currentTime / lrcPlayer.mObj.duration;
fgc.style.strokeDashoffset = bgcLen * (1 - processValue);
durTime.textContent = formatTime(lrcPlayer.mObj.duration);
curTime.textContent = formatTime(lrcPlayer.mObj.currentTime);
});
// 动态元素监测
let runState = () => {
lrcPlayer.mObj.paused
? (mCtrl.style.setProperty('--rState','paused'),sObj.pauseAnimations())
: (mCtrl.style.setProperty('--rState','running'),sObj.unpauseAnimations());
}
// SVG viewBox 与 实际尺寸的比值
let factorX = svgObj.viewBox.baseVal.width / svgObj.clientWidth;
let factorY = svgObj.viewBox.baseVal.height / svgObj.clientHeight;
//console.log(factorX, factorY);
// 歌曲进度条鼠标移动处理
let seeking = false;
let moveEventProc = (event) => {
if(!seeking) return;
let thePoint = 0, minV = 100;
circlePoints.forEach((point, idx ) => {
let mx = (point.x - event.offsetX * factorX), my = (point.y - event.offsetY * factorY);
let mv = mx*mx + my*my;
if(mv < minV) {
minV = mv; thePoint = idx;
}
})
let chkVal = thePoint / bgcLen;
let chkTime = lrcPlayer.mObj.duration * chkVal;
fgc.style.strokeDashoffset = bgcLen * (1 - chkVal);
let fIdx = false;
lrcPlayer.lrcVec.forEach((lrc,idx) => {
if(!fIdx && lrc.seconds >= chkTime ) {
fIdx = !fIdx; lrcPlayer.idx = idx;
lrcPlayer.mObj.currentTime = chkTime;
return fIdx;
}
});
};
fgc.addEventListener("mousemove", (event) => moveEventProc(event));
bgc.addEventListener("mousemove", (event) => moveEventProc(event));
fgc.onclick = bgc.onclick = (event) => seeking = !seeking;
// 歌曲、歌词 及 动态元素 启/停控制
mCtrl.onclick = () => {
lrcPlayer.mObj.paused ? (lrcPlayer.mObj.play()) : (lrcPlayer.mObj.pause());
}
lrcPlayer.mObj.addEventListener('play', () => runState());
lrcPlayer.mObj.addEventListener('pause', () => runState());
lrcPlayer.mObj.play().catch(_ = () => runState());
}
</script>
家和千般好，事顺人和乐，家合万事兴。 梦油 发表于 2025-5-14 16:33
家和千般好，事顺人和乐，家合万事兴。
是的，一个家庭的幸福与否就是老师说的：家和千般好，事顺人和乐，家合万事兴。
家庭和睦是事业成功和人生幸福的基础，谢谢江南精彩分享{:4_204:} 又知道个节日，之前还不知道有这样一个节日呢{:4_173:} 江南辛苦，做了这么多表现家庭和睦的图片。{:4_199:}
AI制作总有点缺陷呢，比如第二张里一个小孩顶着老太太的白色发型，还一张妈妈的图图和小孩一样高{:4_173:} 欣赏江南好帖，节日帖子亮起来{:4_187:} 阿姨辛苦的，一下子做这么多图片，个个漂亮，家和万事兴{:4_199:} 原来今天是个国际家庭日，涨知识了，小辣椒今天才知道 杨帆 发表于 2025-5-14 18:08
家庭和睦是事业成功和人生幸福的基础，谢谢江南精彩分享
早上问好，谢谢欣赏，祝您阖家幸福美满！{:4_204:} 红影 发表于 2025-5-14 21:29
又知道个节日，之前还不知道有这样一个节日呢
早上问好影子，是啊，红五月里的节日好像特别多。祝您阖家幸福美满！{:4_204:} 红影 发表于 2025-5-14 21:30
江南辛苦，做了这么多表现家庭和睦的图片。
AI制作总有点缺陷呢，比如第二张里一个小孩顶着老太 ...
是的，我做了12张，主要是放在桌面上图片有点看不太清楚，应该有的还可以，没用上。{:4_173:} 红影 发表于 2025-5-14 21:31
欣赏江南好帖，节日帖子亮起来
谢谢影子支持鼓励。{:4_187:} 小辣椒 发表于 2025-5-14 23:29
阿姨辛苦的，一下子做这么多图片，个个漂亮，家和万事兴
早上问好小辣椒，一共做了12张，有的还未用上。{:4_204:} 小辣椒 发表于 2025-5-14 23:30
原来今天是个国际家庭日，涨知识了，小辣椒今天才知道
小辣椒，是5月15日，是今天 ，我是提早发帖了。祝您阖家幸福美满！{:4_187:} 梦江南 发表于 2025-5-14 17:16
是的，一个家庭的幸福与否就是老师说的：家和千般好，事顺人和乐，家合万事兴。
是啊，家庭和谐是第一需要，在家里不是说里的地方。 梦油 发表于 2025-5-15 11:17
是啊，家庭和谐是第一需要，在家里不是说里的地方。
就是啊，聪明的人就懂得这个道理。 梦江南 发表于 2025-5-15 11:57
就是啊，聪明的人就懂得这个道理。
是的，梦江南朋友。家庭和谐是最大的幸福和快乐。 梦油 发表于 2025-5-15 14:16
是的，梦江南朋友。家庭和谐是最大的幸福和快乐。
家庭和谐了人的寿命也会增长的。 梦江南 发表于 2025-5-15 08:35
早上问好影子，是啊，红五月里的节日好像特别多。祝您阖家幸福美满！
我一般只知道我们的传统节日，对这些国际节日不太关注{:4_173:}
页:
[1]
2