菊花黄菊花香 套用难难老师雾松代码
本帖最后由 梦江南 于 2024-10-18 09:25 编辑 <br /><br /><style>@import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);
#outBlk {
position: relative;
width: 1500px;
height: 844px;
margin: 90px 0 32px calc(50% - 831px);
overflow: hidden;
border-radius: 24px;
box-shadow: 4px 4px 10px black;
}
#showPic {
width: 720px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-20%, -50%);
overflow: hidden;
border-radius: 32px;
box-shadow: 2px 2px 5px black;
}
#processShow {
position: absolute;
left: 50px;
bottom: -10px;
width: 100px;
height: 100px;
cursor: pointer;
}
/** 不满意一般设置也可以调整下 */
.lrcShow {
font: normal 2.5em 微软雅黑;
pointer-events: none;
left: 20%;
bottom: 0px;
}
.lrcShow::before {
color: hsl(0, 50%, 50%);
}
#vid {
position: absolute;
width: 115%;
height: 100%;
object-fit: cover;
left: 0px;
}
</style>
<div id="outBlk">
<video id='vid' src="https://img.tukuppt.com/video_show/2475824/00/01/82/5b4acf0a4c1c7.mp4" loop autoplay muted></video>
<div id="showPic"></div>
<div id="processShow">
<svg stroke-width="5" viewBox="0 0 150 150">
<!-- 背景圆形 -->
<circle cx="75" cy="75" r="50" stroke="#ebeef5" fill="none"></circle>
<text x="50%" y="50%" stroke="#ffa020" text-anchor="middle" dominant-baseline="middle" stroke-width="1" style="font-size:24px;" id="procV">0%</text>
<!-- 进度条 -->
<circle class="process-circle" cx="75" cy="75" r="50" stroke="#ffa020" transform="rotate(-90 75 75)" fill="none" stroke-dasharray="314" stroke-dashoffset="314"></circle>
</svg>
</div>
<div class="lrcShow" data-lrc="菊花">菊花</div>
</div>
<script>
var pics = ["https://pic.imgdb.cn/item/670e0c67d29ded1a8ce76a56.jpg", "https://pic.imgdb.cn/item/670e0cb5d29ded1a8ce79a0b.jpg", "https://pic.imgdb.cn/item/670e0cd5d29ded1a8ce7af89.jpg", "https://pic.imgdb.cn/item/670e0cf7d29ded1a8ce7c551.png", "https://pic.imgdb.cn/item/670e0d1bd29ded1a8ce7df9b.png", "https://pic.imgdb.cn/item/670e0d42d29ded1a8ce7fb2f.png", "https://pic.imgdb.cn/item/670e0d67d29ded1a8ce8138d.png", "https://pic.imgdb.cn/item/670e0d88d29ded1a8ce82d25.png", "https://pic.imgdb.cn/item/670e0dacd29ded1a8ce845cb.png", "https://pic.imgdb.cn/item/670e0dd0d29ded1a8ce85f5a.png", "https://pic.imgdb.cn/item/670e0df2d29ded1a8ce87e88.png", "https://pic.imgdb.cn/item/670e0e1ad29ded1a8ce8980f.png", "https://pic.imgdb.cn/item/670e0e3ed29ded1a8ce8b4d5.png", "https://pic.imgdb.cn/item/670e0e62d29ded1a8ce8d6fb.png", "https://pic.imgdb.cn/item/670e0e85d29ded1a8ce8f079.png", "https://pic.imgdb.cn/item/670e0ea3d29ded1a8ce902d8.png", "https://pic.imgdb.cn/item/670e0edcd29ded1a8ce9283a.jpg", "https://pic.imgdb.cn/item/670e0ef6d29ded1a8ce93afa.jpg", "https://pic.imgdb.cn/item/670e0f14d29ded1a8ce95437.jpg", "https://pic.imgdb.cn/item/670e0f30d29ded1a8ce96a25.jpg", "https://pic.imgdb.cn/item/670e0f52d29ded1a8ce98413.jpg", "https://pic.imgdb.cn/item/670e0f6bd29ded1a8ce99a89.jpg", "https://pic.imgdb.cn/item/670e0f87d29ded1a8ce9b1c6.jpg", "https://pic.imgdb.cn/item/670e0fa4d29ded1a8ce9cc2e.jpg", "https://pic.imgdb.cn/item/670e0fc3d29ded1a8ce9e4b6.jpg", "https://pic.imgdb.cn/item/670e0fe1d29ded1a8ce9f9fa.jpg", ];
var sft = document.createElement('script');
sft.type = 'text/javascript';
sft.src = "https://file.uhsea.com/2410/34b933e409e019a1d30f535fa704e5122O.js";
//sf.src = "./genSVG.js";
sft.charset = "utf-8";
document.body.appendChild(sft);
sft.onload = () => {
let opts = {
width: 960,
height: 600,
showObj: showPic
};
genSVGtag(opts);
}
const processCircle = document.querySelector('.process-circle');
// 获取圆的周长
const circumference = processCircle.getTotalLength();
// 把周长赋值给 strokeDasharray
processCircle.style.strokeDasharray = circumference;
function setProcessCircle(percent = 0) {
// 动态计算 offset 赋值给 strokeDashoffset
// 为了支持 percent = 0 | '0%'，所以使用 parseInt 转换
processCircle.style.strokeDashoffset = circumference * (1 - parseInt(percent) / 100)
}
var scf = document.createElement('script');
scf.type = 'text/javascript';
scf.src = "https://file.uhsea.com/2410/739c572b5176f670f350463cf9ade957QB.js";
scf.charset = "utf-8";
document.body.appendChild(scf);
scf.onload = () => {
let lrctxt = `作词 : 野帆 \n作曲 : 林庭筠\n歌手：风飞飞\n
秋风吹起日渐凉\n百花失色菊花香\n菊花香 菊花黄\n
不与群芳争短长\n做人要象菊花样\n不畏艰苦 莫怀忧伤\n有始有终为理想\n就象菊花傲秋霜\n歌词编辑：梦江南\n秋风吹起日渐凉\n百花失色菊花香\n菊花香 菊花黄\n不与群芳争短长\n做人要象菊花样\n不畏艰苦 莫怀忧伤\n有始有终为理想\n就象菊花傲秋霜\n
`;
let paras = {
lrcTxt: lrctxt,
audioURL: "https://music.163.com/song/media/outer/url?id=232334.mp3",
}
let player = new lrcPlayerY(paras);
player.mObj.addEventListener('timeupdate', function() {
let processValue = player.mObj.currentTime / player.mObj.duration;
processCircle.style.strokeDashoffset = circumference * (1 - processValue);
procV.textContent = parseInt(processValue * 100) + '%';
});
processShow.onclick = () => {
player.mObj.paused ? player.mObj.play() : player.mObj.pause();
}
}
</script> 美不胜收！{:5_116:} 梦油 发表于 2024-10-17 09:30
美不胜收！
问好梦油老师，谢谢沙发支持！{:4_204:} 漂亮的图片轮播，江南把代码用得真好{:4_199:} 每次刷新后，轮播的随机效果也跟着变化了呢。
还加了歌词同步和带进度条的小播，给江南点赞{:4_187:} http://5b0988e595225.cdn.sohucs.com/images/20180609/f85bb2266e7e495d8a8203f3e12af903.gif
红影 发表于 2024-10-17 10:36
漂亮的图片轮播，江南把代码用得真好
问好影子，谢谢鼓励。{:4_187:} 红影 发表于 2024-10-17 10:39
每次刷新后，轮播的随机效果也跟着变化了呢。
还加了歌词同步和带进度条的小播，给江南点赞
这都是难难老师的功劳。我只是套用了。{:4_204:} 起个网名好难 发表于 2024-10-17 10:46
谢谢老师的代码，辛苦了！{:4_187:} 梦江南 发表于 2024-10-17 10:00
问好梦油老师，谢谢沙发支持！
彼此、彼此。 梦油 发表于 2024-10-17 13:44
彼此、彼此。
下午问好！谢谢！ 梦江南 发表于 2024-10-17 12:26
问好影子，谢谢鼓励。
这个做到真好，江南厉害{:4_187:} 梦江南 发表于 2024-10-17 12:27
这都是难难老师的功劳。我只是套用了。
也有江南自己的设计啊，很不错的{:4_187:} 红影 发表于 2024-10-17 16:29
这个做到真好，江南厉害
不是我厉害，是难难的代码好。{:4_204:} 红影 发表于 2024-10-17 16:30
也有江南自己的设计啊，很不错的
一点点小小的移动。{:4_187:} 欣赏老师的佳作，学习了！
花美人潮，佳作！ 梦江南 发表于 2024-10-17 17:27
不是我厉害，是难难的代码好。
难难的研究还是很深的呢{:4_187:} 梦江南 发表于 2024-10-17 17:28
一点点小小的移动。
这些菊花看着都是黑的背景，是夜里拍摄的吧。 漂亮，梦江南套用难难的代码制作很漂亮哦{:4_199:}