映像2024：一月一个难忘的瞬间
本帖最后由 杨帆 于 2024-12-14 22:27 编辑 <br /><br /><style>@import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);
:root{--rState:running;--w:1400px;--h:800px;--fw:1400px;--fh:800px}
#fullscreen { position: absolute; top:3%; left:88%;color:#ffffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2.2em华文新魏; opacity: 0.8; cursor: pointer; z-index: 5}
.lrcShow{font:bold 2.4em 楷体_GD2312,sans-serif;pointer-events:none;left:12%;top:3%;filter:drop-shadow(1px 0px 0px white)drop-shadow(0px 1px 0px white)drop-shadow(-1px 0px 0px white)drop-shadow(0px -1px 0px white);z-index:4;}
.lrcShow::before{color:hsl(0,80%,80%);}
#outBlk{position:relative;width:var(--w);height:var(--h);background:#000000 ) no-repeat center /cover;overflow:hidden;margin: 130px 0 30px calc(50% - 780px);box-shadow:4px 4px 10px #000;}
zxx-slide{width:var(--fw);height:var(--fh);position:absolute;z-index:1;}
.zxx-slide-a{position:absolute;cursor:default;pointer-events:none;}
.zxx-slide-a.in{z-index:2;animation-duration:2s;animation-name:brightnessIn;transition:1s;}
.zxx-slide-img{width:var(--fw);height:var(--fh);}
@keyframes brightnessIn{0%{transform:scale(0.1);opacity:0;}10%{transform:scale(0.5);opacity:1;}100%{transform:scale(1)}}
#processMeter{position:absolute;right:20px;bottom:10px;width:200px;height:100px;cursor:pointer;z-index:33;}
#rPlayer{transform-origin:50%;animation:rot 5s linear infinite var(--rState);}
@keyframes rot{to{transform: rotate(1turn)}}
</style>
<div id="outBlk">
<span id="fullscreen">全屏观赏</span>
<zxx-slide></zxx-slide>
<svg stroke-width="5" viewBox="0 0 200 100" id="processMeter">
<!-- 背景圆形 -->
<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
class="process-circle"
d="M 100 5 A 95 45 0 0 1 100 95 A 95 45 0 0 1 100 5"
stroke="darkred"
fill="none"
stroke-dasharray="455"
stroke-dashoffset="455"
></path>
<defs>
<clipPath id="clip">
<circle cx="100" cy="50" r="41" />
</clilpPath>
</defs>
<image xlink:href="https://pic.imgdb.cn/item/6723214fd29ded1a8cfe28f1.png" width="100" height='100' x="50" y="0" id="rPlayer" clip-path="url(#clip)" preserveAspectRatio="none" />
<text x="85%" y="50%" stroke="lightgray" text-anchor="middle" dominant-baseline="middle" stroke-width="2" style="font-size:13px;" id="durTime"> </text>
<text x="15%" y="50%" stroke="lightgray" text-anchor="middle" dominant-baseline="middle" stroke-width="2" style="font-size:13px;" id="curTime"> </text>
</svg>
<div class="lrcShow" data-lrc="映像2024" >映像2024</div>
</div>
<script>
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 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();
for(let i = 0; i < bgcLen; i++) {
circlePoints.push(bgc.getPointAtLength(i));
}
console.log(circlePoints);
let lrctxt = `
`;
let opts = {
lrcTxt:lrctxt,
audioURL:"https://music.163.com/song/media/outer/url?id=1855486473.mp3",
}
let player = new lrcPlayerY(opts);
//console.log(player.lrcVec);
let pics = [
"https://pic.imgdb.cn/item/675d1017d0e0a243d4e3cd83.gif",
"https://pic.imgdb.cn/item/675d1035d0e0a243d4e3cd85.gif",
"https://pic.imgdb.cn/item/675d34a9d0e0a243d4e3d8b2.gif",
"https://pic.imgdb.cn/item/675d34e5d0e0a243d4e3d8d5.gif",
"https://pic.imgdb.cn/item/675d1076d0e0a243d4e3cd8c.gif",
"https://pic.imgdb.cn/item/675d1089d0e0a243d4e3cd8d.gif",
"https://pic.imgdb.cn/item/675d109dd0e0a243d4e3cd8f.gif",
"https://pic.imgdb.cn/item/675d10afd0e0a243d4e3cd92.gif",
"https://pic.imgdb.cn/item/675d10cad0e0a243d4e3cd94.gif",
"https://pic.imgdb.cn/item/675d10e0d0e0a243d4e3cd9d.gif",
"https://pic.imgdb.cn/item/675d10f3d0e0a243d4e3cd9f.gif",
"https://pic.imgdb.cn/item/675d350bd0e0a243d4e3d8f1.gif",
"https://pic.imgdb.cn/item/675d1017d0e0a243d4e3cd83.gif",
];
let eleZxxSlides = document.querySelectorAll('zxx-slide');
pics.forEach(pic => {
let aObj = document.createElement('a');
aObj.className = 'zxx-slide-a';
let imgObj = document.createElement('img');
imgObj.src = pic;
imgObj.className = 'zxx-slide-img';
aObj.appendChild(imgObj);
eleZxxSlides.appendChild(aObj);
});
[].slice.call(eleZxxSlides).forEach(function(container) {
let timerSlide = null;
let indexSlide = 0;
// 对应的元素
let eleSlides = [].slice.call(container.querySelectorAll('a'));
let eleButtons = [].slice.call(container.querySelectorAll('button'));
let 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();
}, 8000);
}
indexSlide++;
setTimeout(funSlide, 8000);
});
let formatTime = (time) => {
let str = '';
let min = parseInt(time / 60);
let sec = parseInt(time % 60);
return ((min < 10 ? '0'+min:min) + ":" + (sec < 10 ? '0'+sec:sec));
};
player.mObj.addEventListener('timeupdate', function() {
let processValue = player.mObj.currentTime / player.mObj.duration;
processCircle.style.strokeDashoffset = circumference * (1 - processValue);
durTime.textContent = formatTime(player.mObj.duration);
curTime.textContent = formatTime(player.mObj.currentTime);
});
rPlayer.onclick = () => {
player.mObj.paused ? (outBlk.style.setProperty('--rState','running'), player.mObj.play()) : (outBlk.style.setProperty('--rState','paused'), player.mObj.pause());
}
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 / circumference;
let chkTime = player.mObj.duration * chkVal;
processCircle.style.strokeDashoffset = circumference * (1 - chkVal);
for(i = 0; i < player.lrcVec.length; i++) {
if(player.lrcVec.seconds >= chkTime) {
//console.log(player.lrcVec.seconds, i);
player.idx = i;
player.mObj.currentTime = chkTime;
break;
}
};
};
processCircle.addEventListener("mousemove", (event) => moveEventProc(event));
bgc.addEventListener("mousemove", (event) => moveEventProc(event));
processCircle.onclick = bgc.onclick = () => seeking = !seeking;
}
let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出全屏',outBlk.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
if(fs) {outBlk.style.setProperty('--fw',window.screen.width + 'px');outBlk.style.setProperty('--fh',window.screen.height + 'px');}
fs = !fs;
};
</script>
https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif 看见画面上有乱码 欣赏漂亮的代码制作{:4_187:} 感谢分享{:4_187:} 起个网名好难 发表于 2024-12-14 19:34
谢谢老师一贯的支持、鼓励与帮助！{:4_191:}
请老师不忙时看看，为何每张图片的背景不是其前面一张，且必须有一张出现2次呢@起个网名好难 世外桃源 发表于 2024-12-14 19:58
欣赏漂亮的代码制作
问好世外桃源友友，方便时请截个图看看？我这看不到画面上有乱码呀{:5_106:} 杨帆 发表于 2024-12-14 20:20
问好世外桃源友友，方便时请截个图看看？我这看不到画面上有乱码呀
杨帆 发表于 2024-12-14 20:17
谢谢老师一贯的支持、鼓励与帮助！
请老师不忙时看看，为何每张图片的背景不是其前面一张，且 ...
这些图片可以看作顺序堆摞一起，显示某张图片相当于把它拿出来放在最上面，换另一张图片时它又被放回原来的位置，看到的背景实际是这摞图片的第一张。
当第一张拿出来显示是就会感觉这图片出现两次。 欣赏杨帆的图片转换效果制作，流畅自然{:4_199:} 世外桃源 发表于 2024-12-14 20:27
我也是看见有这个乱码文字，应该是全屏欣赏的4个字 世外桃源 发表于 2024-12-14 20:27
我这儿显示正常呀，应该是浏览器的原因吧{:5_106:} 杨帆 发表于 2024-12-14 21:13
我这儿显示正常呀，应该是浏览器的原因吧
确实乱码，由于空间帖的原因吧。 起个网名好难 发表于 2024-12-14 20:46
这些图片可以看作顺序堆摞一起，显示某张图片相当于把它拿出来放在最上面，换另一张图片时它又被放回原来 ...
有一定道理，谢谢老师，我再想想{:5_114:} 杨帆 发表于 2024-12-14 21:19
有一定道理，谢谢老师，我再想想
直接贴代码不好吗 小辣椒 发表于 2024-12-14 21:04
欣赏杨帆的图片转换效果制作，流畅自然
这是在难难老师多次指导下的效果呦，谢谢小辣椒支持与鼓励{:4_204:} 杨帆 发表于 2024-12-14 21:21
这是在难难老师多次指导下的效果呦，谢谢小辣椒支持与鼓励
上传空间帖之前，代码最上面加上这个语句
<meta charset="UTF-8"> 杨帆 发表于 2024-12-14 21:21
这是在难难老师多次指导下的效果呦，谢谢小辣椒支持与鼓励
是啊，多多向难难老师学习，肯定会进步的 本帖最后由 杨帆 于 2024-12-14 22:05 编辑
小辣椒 发表于 2024-12-14 21:04
我也是看见有这个乱码文字，应该是全屏欣赏的4个字对呀，为何你那儿也不能正常显示呢，我还专门注意了编码选择呢 杨帆 发表于 2024-12-14 21:27
对呀，为何你那儿也不能正常显示呢，我还专门注意了编码选择呢
用代码的没有乱码的，你上传空间那个有乱码