高原上的女人

梦江南 发表于 2025-6-20 10:17

本帖最后由梦江南于 2025-6-20 10:17 编辑 <br /><br /><style>
@import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);
#oBlk {position:relative; width:1080px;height:720px;margin:90px 0 32px calc(50% - 621px);background-color:skyblue;overflow:hidden;border-radius:24px;box-shadow:4px 4px 10px black;}
#showSVG {width:1080px; position:absolute; left:0px; top:0px;}
#processMeter {position: absolute; left:5%; bottom:5px; width: 200px; height:100px; cursor: pointer; z-index:999;}
@keyframes rot {to {transform:rotate(1turn)}}
/** 不满意一般设置也可以调整下 */
.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:hsl(0, 50%, 50%);
}
</style>
<div id="oBlk">
<div id="showSVG" ></div>

<div id="processMeter">
<svg viewBox="0 0 200 100" id="svgObj">

<g stroke-width='5'>
<path id='bgc' d="M 100 5 A 95 45 0 0 1 100 95 A 95 45 0 0 1 100 5" stroke="#ebeef5"fill="none" ></path>

<path
   id="pCircle"
   d="M 100 5 A 95 45 0 0 1 100 95 A 95 45 0 0 1 100 5"
   stroke="darkred"
   fill="none"
></path>
</g>
<g id="pauseBtn" fill="darkred" opacity='1'>
<title>点击暂停</title>
<rect x="85" y="25" width="10" height="50"></rect>
<rect x="95" y="25" width="10" height="50" fill="transparent"></rect>
<rect x="105" y="25" width="10" height="50"></rect>
         </g>

<polygon points="80 25,130 50,80 75" id="playBtn" fill="darkred" opacity='0'></polygon>
<g text-anchor="middle" dominant-baseline="middle" fill='white' style="font:bold 24px;">
<text x="80%" y="50%" id="durTime"> </text>
<text x="20%" y="50%" id="curTime"> </text>
</g>
</svg>
</div>
<div class="lrcShow" data-lrc="高原上的女人" >高原上的女人</div>
</div>
<script>
var pics = [
"https://img4.oldkids.cn/upload/2025/06/20/blog_260798238_20250620083936547.png",
"https://img3.oldkids.cn/upload/2025/06/20/blog_260798238_20250620083934129.png",
"https://img2.oldkids.cn/upload/2025/06/20/blog_260798238_20250620083933111.png",
"https://img2.oldkids.cn/upload/2025/06/20/blog_260798238_20250620083933647.png",
"https://img1.oldkids.cn/upload/2025/06/20/blog_260798238_20250620083928751.jpeg",
"https://img4.oldkids.cn/upload/2025/06/20/blog_260798238_20250620083928054.jpeg",
"https://img3.oldkids.cn/upload/2025/06/20/blog_260798238_20250620083928665.jpeg",
"https://img1.oldkids.cn/upload/2025/06/20/blog_260798238_20250620083932665.png",
"https://img3.oldkids.cn/upload/2025/06/20/blog_260798238_20250620083932691.png",
"https://img2.oldkids.cn/upload/2025/06/20/blog_260798238_20250620083929604.jpeg",
"https://img2.oldkids.cn/upload/2025/06/20/blog_260798238_20250620100538669.jpeg",
"https://img4.oldkids.cn/upload/2025/06/20/blog_260798238_20250620101531542.jpeg",
];
var sf = document.createElement('script');
sf.type = 'text/javascript';
sf.src = "https://file.uhsea.com/2410/34b933e409e019a1d30f535fa704e5122O.js";
//sf.src = "./genSVG.js";
sf.charset = "utf-8";
document.body.appendChild(sf);

sf.onload = () => {
let opts = {width:1080, height:720, showObj: showSVG};
genSVGtag(opts);
}

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 circlePoints = [];
let bgcLen = bgc.getTotalLength();
pCircle.style.strokeDasharray = bgc.style.strokeDasharray = bgcLen;

for(let i = 0; i < bgcLen; i++) {
circlePoints.push(bgc.getPointAtLength(i));
}
//console.log(circlePoints);
let lrctxt = `高原女人 - 央金兰泽\n
歌词由 www.45hk.com 提供\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 `;
let opts = {
lrcTxt:lrctxt,
audioURL:"https://img3.oldkids.cn/upload/2025/06/19/blog_260798238_20250619172319404.mp3",
}
let player = new lrcPlayerY(opts);
//console.log(player.lrcVec);
   var eleZxxSlides = document.querySelectorAll('zxx-slide');
[].slice.call(eleZxxSlides).forEach(function(container) {
var timerSlide = null;
var indexSlide = 0;
container.addEventListener('mouseover', function() {
   clearTimeout(timerSlide);
});
container.addEventListener('mouseout', function() {
   clearTimeout(timerSlide);
   funSlide();
});
// 对应的元素
var eleSlides = [].slice.call(container.querySelectorAll('a'));
var eleButtons = [].slice.call(container.querySelectorAll('button'));
var funSlide = function() {
   eleSlides.forEach(function(slide, index) {
   if (!player.mObj.paused) {
      if (indexSlide == index) {
         slide.classList.add('in');
      } else if (slide.classList.contains('in')) {
         slide.classList.remove('in');
      }
   }
   });
   timerSlide = setTimeout(function() {
   indexSlide++;
   if (indexSlide == eleSlides.length) {
      indexSlide = 0;
   }
   funSlide();
   }, 10000);
}
indexSlide++;
setTimeout(funSlide, 10000);
});
let formatTime = (time) => {
let min = ('' + parseInt(time / 60)).padStart(2,'0');
let sec = ('' + parseInt(time % 60)).padStart(2,'0');
return (`${min}:${sec}`);
};

player.mObj.addEventListener('timeupdate', function() {
let processValue = player.mObj.currentTime / player.mObj.duration;
pCircle.style.strokeDashoffset = bgcLen * (1 - processValue);
durTime.textContent = formatTime(player.mObj.duration);
curTime.textContent = formatTime(player.mObj.currentTime);
});
let aniSvg = oBlk.querySelector('#showSVG svg');;
let runState = () => {
player.mObj.paused
? (playBtn.style.opacity = '1', pauseBtn.style.opacity = '0' ,aniSvg.pauseAnimations())
: (playBtn.style.opacity = '0', pauseBtn.style.opacity = '1' ,aniSvg.unpauseAnimations());
}

let seeking = false;
let moveEventProc = (event) => {
if(!seeking) return;
let thePoint = 0, minV = 100;
circlePoints.forEach((point, idx ) => {
let mx = (point.x - event.offsetX), my = (point.y - event.offsetY);
let mv = mx*mx + my*my;
if(mv < minV) {
minV = mv; thePoint = idx;
}
})
let chkVal = thePoint / bgcLen;
let chkTime = player.mObj.duration * chkVal;
pCircle.style.strokeDashoffset = bgcLen * (1 - chkVal);
/**
for(i = 0; i < player.lrcVec.length; i++) {
if((player.lrcVec+i).seconds >= chkTime) {
//console.log(player.lrcVec<i>.seconds, i);
player.idx = i;
player.mObj.currentTime = chkTime;
break;
}
};
**/
let fIdx = -1;
player.lrcVec.forEach((lrc,idx) => {
if(fIdx < 0 && lrc.seconds >= chkTime ) {
fIdx = player.idx = idx;
player.mObj.currentTime = chkTime;
//console.log(lrc.seconds, idx);
return fIdx;
}
});

};
pCircle.addEventListener("mousemove", (event) => moveEventProc(event));
bgc.addEventListener("mousemove", (event) => moveEventProc(event));
pCircle.onclick = bgc.onclick = () => seeking = !seeking;

pauseBtn.onclick = playBtn.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>

杨帆发表于 2025-6-20 12:20

问好江南，谢谢精彩分享{:4_187:}

梦江南 发表于 2025-6-20 13:56

杨帆发表于 2025-6-20 12:20
问好江南，谢谢精彩分享

谢谢杨帆老师沙发欣赏，问好！{:4_204:}

梦油发表于 2025-6-20 16:33

梦江南手真巧。

梦江南 发表于 2025-6-20 18:11

梦油发表于 2025-6-20 16:33
梦江南手真巧。

谢谢梦油欣赏，梦江南笨手呢。{:4_204:}

红影发表于 2025-6-20 18:29

漂亮的图片轮播，漂亮的高原的女人，那么阳光健康，热情奔放。{:4_187:}

红影发表于 2025-6-20 18:31

制图漂亮，播放器的选用也漂亮，欣赏江南好帖{:4_199:}

小文发表于 2025-6-20 20:49

好听！问好！

梦江南 发表于 2025-6-21 09:52

本帖最后由梦江南于 2025-6-21 09:55 编辑

红影发表于 2025-6-20 18:29
漂亮的图片轮播，漂亮的高原的女人，那么阳光健康，热情奔放。
问好影子，谢谢欣赏支持。祝夏至安康！{:4_204:}

梦江南 发表于 2025-6-21 09:54

红影发表于 2025-6-20 18:31
制图漂亮，播放器的选用也漂亮，欣赏江南好帖

谢谢影子夸赞，惭愧。

梦江南 发表于 2025-6-21 09:54

小文发表于 2025-6-20 20:49
好听！问好！

问好小文，谢谢欣赏支持，祝夏至安康！{:4_204:}

梦油发表于 2025-6-21 14:43

梦江南发表于 2025-6-20 18:11
谢谢梦油欣赏，梦江南笨手呢。

做得很好哦！

梦江南 发表于 2025-6-21 14:53

梦油发表于 2025-6-21 14:43
做得很好哦！

谢谢梦油老师鼓励，夏至安康！

梦油发表于 2025-6-21 15:09

梦江南发表于 2025-6-21 14:53
谢谢梦油老师鼓励，夏至安康！

我们这里是三天高温预警，你们那里一定更热，梦江南朋友保重！

红影发表于 2025-6-21 15:39

梦江南发表于 2025-6-21 09:52
问好影子，谢谢欣赏支持。祝夏至安康！

谢谢江南的美好祝福，也祝您夏至安康{:4_187:}

红影发表于 2025-6-21 15:39

梦江南发表于 2025-6-21 09:54
谢谢影子夸赞，惭愧。

这个制作很赞呢，江南厉害{:4_187:}

梦江南 发表于 2025-6-21 17:36

梦油发表于 2025-6-21 15:09
我们这里是三天高温预警，你们那里一定更热，梦江南朋友保重！

谢谢梦油老师，我已经开空调了。

梦江南 发表于 2025-6-21 17:37

红影发表于 2025-6-21 15:39
谢谢江南的美好祝福，也祝您夏至安康

上海也热的，多保重。

梦江南 发表于 2025-6-21 17:38

红影发表于 2025-6-21 15:39
这个制作很赞呢，江南厉害

谢谢影子鼓励，难点的代码不会做，只套简单点的玩玩。

红影发表于 2025-6-21 23:18

梦江南发表于 2025-6-21 17:37
上海也热的，多保重。

是的，下雨时还好点，否则还是挺热的。

页: [1] 2

花潮论坛's Archiver

高原上的女人