极速模式
作者: 自由飞翔6888 时间: 2025-6-30 17:01
雅致漂亮的美贴，图美歌靓，光色好看，赏心悦目，制作真棒呢，慢慢欣赏
作者: 自由飞翔6888 时间: 2025-6-30 17:04
问好向荣，感谢分享精彩作品，辛苦了，祝天天快乐
作者: 兰蕙hn 时间: 2025-6-30 17:40
前排坐上了
作者: 兰蕙hn 时间: 2025-6-30 18:48
精彩的特效，画面效果漂亮，主题突出，精心的制作
好帖点赞哦，欣赏问好，辛苦了！
作者: 兰蕙hn 时间: 2025-6-30 18:53
庆祝中国共产党成立104周年！
作者: 兰蕙hn 时间: 2025-6-30 18:59
期待向荣更多的精彩呈现，开心每一天！
作者: 伯懿 时间: 2025-6-30 19:06
新时代征程上，党的领航是最亮的灯塔！从脱贫攻坚到科技突破，每一步都见证‘为人民’的初心。看这视频，仿佛看见无数奋斗者跟着党的旗帜奔跑，身为追光者一员，愿把青春融进‘领航中国’的画卷，祝党生日快乐，征程永远辉煌！好礼盛赞！
作者: 伯懿 时间: 2025-6-30 19:06
愿五星红旗永扬，党徽照亮复兴路，伟大中国在时代长卷中续写更多辉煌篇章！
作者: 秋水如泓 时间: 2025-7-1 11:47
庆祝中国共产党建党104周年
[本帖最后由 秋水如泓 于 2025-7-1 11:57 编辑]
作者: 秋水如泓 时间: 2025-7-1 11:47
永远更党走
作者: 恋上平凡 时间: 2025-7-2 08:33
制作精彩，艺术的美感，效果漂亮，欣赏问好
作者: 恋上平凡 时间: 2025-7-2 08:36
期待更多精彩，辛苦了，感谢分享
作者: 紫百合123 时间: 2025-7-2 16:22
欣赏美图，庆祝中国共产党建党104周年
作者: 向荣2 时间: 2025-8-24 16:37
谢谢老师们鼓励
作者: 向荣2 时间: 2025-8-24 16:51
＜script type="module"＞
var per = 0,
step = 0.008,
aniCounter = 0,
raf,
baseInterval = 24000,
interval = baseInterval,
isPlaying = true,
isAudioPlaying = true,
animationTimeout;
var pics = [
'https://image.hnol.net/c/2025-08/24/16/202508241636173411-5083785.jpg',
'https://image.hnol.net/c/2025-08/24/16/202508241636349341-5083785.jpg',
'https://image.hnol.net/c/2025-08/24/16/202508241636495991-5083785.jpg',
'https://image.hnol.net/c/2025-08/24/16/202508241636173411-5083785.jpg',
];
// 获取DOM元素
const loadingIndicator = document.querySelector('.loading-indicator');
const audioElement = document.getElementById('aud');
const pa = document.getElementById('pa');
// 音频控制函数
function toggleAudio() {
if (audioElement.paused) {
audioElement.play().then(() => {
isAudioPlaying = true;
}).catch(e => {
console.log('播放:', e);
});
} else {
audioElement.pause();
isAudioPlaying = false;
}
}
// 页面交互触发自动播放
function handleInteraction() {
if (!isAudioPlaying) {
audioElement.play().then(() => {
isAudioPlaying = true;
}).catch(e => {
console.log('交互触发播放:', e);
});
}
document.removeEventListener('click', handleInteraction);
document.removeEventListener('touchstart', handleInteraction);
}
function preloadImages() {
loadingIndicator.style.display = 'block';
let loadedCount = 0;
pics.forEach(src => {
const img = new Image();
img.src = src;
img.onload = img.onerror = () => {
loadedCount++;
if (loadedCount === pics.length) {
loadingIndicator.style.display = 'none';
}
};
});
}
let animationStartTime;
function startAnimationLoop() {
if (isPlaying) {
clearTimeout(animationTimeout);
animationStartTime = Date.now();
animationTimeout = setTimeout(() => {
changeToNextPic();
}, interval);
}
}
function changeToNextPic() {
loadingIndicator.style.display = 'block';
aniCounter = (aniCounter + 1) % pics.length;
updateCurtainAndBackground(() => {
loadingIndicator.style.display = 'none';
});
}
function updateCurtainAndBackground(callback) {
const picIdx = aniCounter % pics.length;
document.querySelectorAll('.curtain-transition').forEach(el => el.remove());
const leftCurtain = document.createElement('div');
leftCurtain.className = 'curtain-transition curtain-left';
leftCurtain.style.backgroundImage = `url(${pics[picIdx]})`;
pa.appendChild(leftCurtain);
const rightCurtain = document.createElement('div');
rightCurtain.className = 'curtain-transition curtain-right';
rightCurtain.style.backgroundImage = `url(${pics[picIdx]})`;
pa.appendChild(rightCurtain);
const img = new Image();
img.src = pics[picIdx];
img.onload = img.onerror = callback;
setTimeout(() => {
pa.style.setProperty('--bg1', `url(${pics[picIdx]}) no-repeat center/cover`);
}, 2000);
const video = document.querySelector('.qk-vid');
video.style.opacity = '0.3';
setTimeout(() => {
video.style.opacity = '0.6';
}, 2000);
cancelAnimationFrame(raf);
per = 0;
changePic();
if (isPlaying) {
startAnimationLoop();
}
}
function changePic() {
if (per > 100) {
per = 0;
} else if (isPlaying) {
per += step;
document.documentElement.style.setProperty('--per', per + '%');
raf = requestAnimationFrame(changePic);
}
}
// 绑定交互事件
document.addEventListener('click', handleInteraction);
document.addEventListener('touchstart', handleInteraction);
document.addEventListener('keydown', (e) => {
if (e.key.toLowerCase() === 'm') {
toggleAudio();
e.preventDefault();
}
});
// 初始化
preloadImages();
startAnimationLoop();
changePic();
// 尝试自动播放音乐
window.addEventListener('load', () => {
if (audioElement.paused) {
audioElement.play().then(() => {
isAudioPlaying = true;
}).catch(e => {
console.log('等待用户交互:', e);
});
}
});
＜/script＞
| 欢迎光临 华声论坛 (http://bbs.voc.com.cn/) |