吊脚楼
<meta name="referrer" content="never" /><style>
@import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);
#oBlk {
width:1540px;height:800px;background-position:top left;background-size:cover;
background-image:url(https://p1-q.mafengwo.net/s14/M00/1E/41/wKgE2l1EBomAKhG2AASYEglQQe888.jpeg);
overflow:hidden;
position:relative;
border-radius:32px;
box-shadow:4px 4px 10px black;
margin:90px 0 40px calc(50% - 851px);
}
.pic {
width:270px;height:360px;
offset-path: path("M 1680 400 Q 1155 100 770 400 T -270 200 h -900");
offset-rotate: 0deg;
background-color:hsla(240, 50%, 80%, 0.7);
overflow:hidden; border-radius:32px;
box-shadow:3px 3px 6px black;
animation:sp 45s linear infinite forwards;
position:absolute; left:0px;top:0px;
transition: 1.2s;opacity:0.8;
}
.pic:nth-of-type(1) {animation-delay:0s;}
.pic:nth-of-type(2) {animation-delay:5s;}
.pic:nth-of-type(3) {animation-delay:10s;}
.pic:nth-of-type(4) {animation-delay:15s;}
.pic:nth-of-type(5) {animation-delay:20s;}
.pic:nth-of-type(6) {animation-delay:25s;}
.pic:nth-of-type(7) {animation-delay:30s;}
.pic:nth-of-type(8) {animation-delay:35s;}
.pic:nth-of-type(9) {animation-delay:40s;}
#processMeter {position: absolute; right:5%; bottom:25px; 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)}}
@keyframes sp {from{offset-distance:0%} to{offset-distance:100%}}
/** 不满意一般设置也可以调整下 */
.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);
bottom: 0px; left:30%;
}
.lrcShow::before {
color:transparent;
}
</style>
<div id="oBlk">
<img src="https://mmbiz.qpic.cn/mmbiz_png/ax9D1cPWz5WCjrLxoibIKJBJv1hzvwTXbuYLdzfWX47GNIagPAvDRLeibrsScibf9ZLIw9oiaHjgQfIXic9lzdcqOicg/640" class="pic" />
<img src="https://mmbiz.qpic.cn/mmbiz_png/ax9D1cPWz5WCjrLxoibIKJBJv1hzvwTXbDpibkcickB1q4gPPQxcLTvhfMUgTic6hk1WiaibX38Wib4h7L7pt9jhOtLDQ/640" class="pic" />
<img src="https://mmbiz.qpic.cn/mmbiz_png/ax9D1cPWz5WCjrLxoibIKJBJv1hzvwTXbw6qmnAuWy3ZnKeElC3gNcl0yltugJbjq6iaJ6FiazOFZ8dgtIq4xFVFQ/640" class="pic" />
<img src="https://mmbiz.qpic.cn/mmbiz_png/ax9D1cPWz5WCjrLxoibIKJBJv1hzvwTXbBrSLI9UlGG09YW4BXYZ89cHUcuZPt4yhMhLXqZNlmI4SK88vGNfFdg/640" class="pic" />
<img src="https://mmbiz.qpic.cn/mmbiz_png/ax9D1cPWz5WCjrLxoibIKJBJv1hzvwTXbXPgIuN8gtOF6Ga7ELzuH5b7r4f6oP7iaadQjjE7ASGVUO7l6Q5LG0RQ/640" class="pic" />
<img src="https://mmbiz.qpic.cn/mmbiz_png/ax9D1cPWz5WCjrLxoibIKJBJv1hzvwTXbJendic3MPwiaCcmoMHSYX4ialPPARb8mB4Diaj3ibBVdVYM6CQ199uUicDVg/640" class="pic" />
<img src="https://mmbiz.qpic.cn/mmbiz_png/ax9D1cPWz5WCjrLxoibIKJBJv1hzvwTXb537Qef96oZkbH9LX7YicKXkiaAaxlJkXuvWjzibUI5yufsgaS0G9FlAwg/640" class="pic" />
<img src="https://mmbiz.qpic.cn/mmbiz_png/ax9D1cPWz5WCjrLxoibIKJBJv1hzvwTXbxLASmcKQZEKUfLbD2FTNlluHMiaZbibwDZQsMiaOoPJaWNzuiawOicROX5A/640" class="pic" />
<img src="https://mmbiz.qpic.cn/mmbiz_png/ax9D1cPWz5WCjrLxoibIKJBJv1hzvwTXbmQtGvn2HoY9UTdUia05h9ACw3EC8Krh5Y8IZe6Cic4liausrhcv08HB3A/640" class="pic" / >
<div id="processMeter">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" id="svgObj">
<radialGradient r="0.8" id="rg">
<stop offset="0.1" stop-color="hsl(0, 50%, 10%)"></stop>
<stop offset="0.5" stop-color="hsl(90, 50%, 50%)"></stop>
<stop offset="1" stop-color="hsl(180, 50%, 90%)"></stop>
</radialGradient>
<path d="M 100 50 A 20 13.333333333333334 0 0 0 140 50 A 20 13.333333333333334 0 0 0 100 50 A 20 13.333333333333334 72 0 0 112.36067977499789 88.04226065180615 A 20 13.333333333333334 72 0 0 100 50 A 20 13.333333333333334 144 0 0 67.63932022500211 73.51141009169893 A 20 13.333333333333334 144 0 0 100 50 A 20 13.333333333333334 216 0 0 67.63932022500211 26.48858990830108 A 20 13.333333333333334 216 0 0 100 50 A 20 13.333333333333334 288 0 0 112.36067977499789 11.957739348193854 A 20 13.333333333333334 288 0 0 100 50 " fill-rule="evenodd" fill="url(#rg)" id="mCtrl"></path>
<g stroke-width="5">
<path id="bgc" d="M 100 5 A 95 45 0 0 1 100 95 A95 45 0 0 1 100 5 " stroke="#ebeef5" fill="none"></path>
<path id="fgc" d="M 100 5 A 95 45 0 0 1 100 95 A95 45 0 0 1 100 5 " stroke="darkred" fill="none"></path>
</g>
<g text-anchor="middle" dominant-baseline="middle" fill="white" style="font:bold 24px;">
<text x="82%" y="50%" id="durTime">00:00</text>
<text x="18%" y="50%" id="curTime">00:00</text>
</g>
</svg>
</div>
<div class="lrcShow" data-lrc="吊脚楼里的阿妹" ></div>
</div>
<script>
let pics = oBlk.querySelectorAll('.pic');
pics.forEach((item, idx) => {
item.ontouchstart = item.onmouseover = () => {
pics.forEach(ele => ele.style.animationPlayState = 'paused');
item.style.transform = 'scale(1.5)';
item.style.opacity = 1;
}
item.ontouchend = item.onmouseout = () => {
pics.forEach(ele => ele.style.animationPlayState = 'running');
item.style.transform = 'scale(1)';
item.style.opacity = 0.8;
}
});
// 载入歌词同步代码
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 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`;
let opts = {
lrcTxt:lrctxt,
audioURL:"https://music.163.com/song/media/outer/url?id=293565.mp3",
}
let player = 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 事件处理中添加与控制路径有关的处理
player.mObj.addEventListener('timeupdate', function() {
let processValue = player.mObj.currentTime / player.mObj.duration;
fgc.style.strokeDashoffset = bgcLen * (1 - processValue);
durTime.textContent = formatTime(player.mObj.duration);
curTime.textContent = formatTime(player.mObj.currentTime);
});
// 动态元素监测
let aniSvg = oBlk.querySelectorAll('svg');
let runState = () => {
player.mObj.paused
? (oBlk.style.setProperty('--rState','paused'), aniSvg.pauseAnimations(), pics.forEach(ele => ele.style.animationPlayState = 'paused'))
: (oBlk.style.setProperty('--rState','running'),aniSvg.unpauseAnimations(),pics.forEach(ele => ele.style.animationPlayState = 'running'));
}
// 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 = player.mObj.duration * chkVal;
fgc.style.strokeDashoffset = bgcLen * (1 - chkVal);
let fIdx = false;
player.lrcVec.forEach((lrc,idx) => {
if(!fIdx && lrc.seconds >= chkTime ) {
fIdx = !fIdx; player.idx = idx;
player.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 = () => {
player.mObj.paused ? (player.mObj.play()) : (player.mObj.pause());
}
player.mObj.addEventListener('play', () => runState());
player.mObj.addEventListener('pause', () => runState());
player.mObj.play().catch(_ = () => runState());
}
</script> 这么多吊脚楼小图，起伏路径也漂亮，鼠标触碰还能暂停、放大，便于仔细观赏。
难难的制作真漂亮{:4_199:} 吊脚楼里不仅阿妹多，灯笼也好多呢{:4_173:} 红影 发表于 2024-12-7 09:39
这么多吊脚楼小图，起伏路径也漂亮，鼠标触碰还能暂停、放大，便于仔细观赏。
难难的制作真漂亮
https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif 红影 发表于 2024-12-7 09:45
吊脚楼里不仅阿妹多，灯笼也好多呢
图片都是重庆的，背景是著名景点洪崖洞（典型的吊脚楼）。
歌曲是凑数的{:5_102:} 起个网名好难 发表于 2024-12-7 10:15
不客气啊，再赏难难好帖{:4_187:} 起个网名好难 发表于 2024-12-7 10:18
图片都是重庆的，背景是著名景点洪崖洞（典型的吊脚楼）。
歌曲是凑数的
哦，还没去过呢。看图图很漂亮的地方呢{:4_187:} 红影 发表于 2024-12-7 14:11
哦，还没去过呢。看图图很漂亮的地方呢
以前出差路过重庆，这些景点也没去过，也就是旅游热给带火的。 很有特色的吊脚楼，谢谢难难老师精彩分享{:4_191:} 杨帆 发表于 2024-12-7 18:33
很有特色的吊脚楼，谢谢难难老师精彩分享
https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif 起个网名好难 发表于 2024-12-7 15:47
以前出差路过重庆，这些景点也没去过，也就是旅游热给带火的。
我还从来没去过重庆，祖国的好地方太多了，来不及逛。 红影 发表于 2024-12-7 20:20
我还从来没去过重庆，祖国的好地方太多了，来不及逛。
看看有关的视频或图片就行了不一定非到实地去看 起个网名好难 发表于 2024-12-7 20:35
看看有关的视频或图片就行了不一定非到实地去看
也是，可以不累就欣赏到了，下次进入虚拟现实的场景里去看更好呢{:4_187:} 红影 发表于 2024-12-7 20:48
也是，可以不累就欣赏到了，下次进入虚拟现实的场景里去看更好呢
这主意不错 起个网名好难 发表于 2024-12-7 20:55
这主意不错
我只看过一次虚拟现实，很有立体感，有身临其境的感觉。 红影 发表于 2024-12-7 21:35
我只看过一次虚拟现实，很有立体感，有身临其境的感觉。
高大上啊 醉美水芙蓉 发表于 2024-12-7 21:37
老师的贴子很有特色！
https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif 起个网名好难 发表于 2024-12-7 21:39
高大上啊
那个和3D体验的游戏还不一样，身不动而心游万里。 红影 发表于 2024-12-7 21:49
那个和3D体验的游戏还不一样，身不动而心游万里。
虚拟的和实地还是略有差别但比视频或图片又进了一大步。
页:
[1]
2