d
This commit is contained in:
229
newKs/src/public/index.html
Normal file
229
newKs/src/public/index.html
Normal file
@@ -0,0 +1,229 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Document</title>
|
||||
<script src="./lazyload.min.js"></script>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
}
|
||||
ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
ul li {
|
||||
width: 20%;
|
||||
background: #000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
ul li .lazy {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ul></ul>
|
||||
</body>
|
||||
<script>
|
||||
// 分页游标
|
||||
let page = "";
|
||||
|
||||
// 滚动相关状态
|
||||
const defaultSpeed = 2; // 默认速度（最小值）
|
||||
let scrollSpeed = defaultSpeed; // 当前滚动速度
|
||||
|
||||
let currentTop = document.documentElement.scrollTop; // 当前滚动高度
|
||||
let lload = null; // 懒加载实例
|
||||
let scrollLock = false; // 滚动加载锁（防止重复请求）
|
||||
let handlerId = null; // 自动滚动帧ID
|
||||
let ul = document.querySelector("ul"); // 视频列表容器
|
||||
|
||||
/**
|
||||
* 获取接口数据
|
||||
*/
|
||||
let getHttpData = async () => {
|
||||
try {
|
||||
let res = await fetch(`http://127.0.0.1:3030?pcursor=${page}`);
|
||||
let data = await res.json();
|
||||
scrollLock = false;
|
||||
render(data);
|
||||
} catch (err) {
|
||||
scrollLock = false;
|
||||
console.error("数据加载失败", err);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 渲染视频列表
|
||||
*/
|
||||
let render = (data) => {
|
||||
let { feeds, pcursor } = data;
|
||||
page = pcursor;
|
||||
|
||||
let index = 0;
|
||||
|
||||
function add() {
|
||||
const li = document.createElement("li");
|
||||
const video = document.createElement("video");
|
||||
|
||||
video.className = "lazy";
|
||||
video.preload = "metadata";
|
||||
video.muted = true;
|
||||
video.loop = true;
|
||||
video.autoplay = false;
|
||||
|
||||
// 封面 + 视频地址
|
||||
const posterUrl = feeds[index].photo.animatedCoverUrl || feeds[index].photo.coverUrl;
|
||||
video.poster = posterUrl;
|
||||
video.dataset.src = feeds[index].photo.photoUrls[0].url;
|
||||
|
||||
li.appendChild(video);
|
||||
ul.appendChild(li);
|
||||
|
||||
// 鼠标移入 → 播放
|
||||
video.onmouseenter = () => {
|
||||
if (video.readyState >= 2) video.play();
|
||||
};
|
||||
|
||||
// 鼠标移出 → 暂停并显示封面
|
||||
video.onmouseleave = () => {
|
||||
video.pause();
|
||||
video.src = "";
|
||||
video.src = video.dataset.src;
|
||||
};
|
||||
|
||||
index++;
|
||||
if (index < feeds.length) {
|
||||
requestAnimationFrame(add);
|
||||
} else {
|
||||
initLazyLoad();
|
||||
// 页面加载完成 → 自动开始滚动（修复这里！）
|
||||
if (!handlerId) {
|
||||
startScroll();
|
||||
}
|
||||
}
|
||||
}
|
||||
requestAnimationFrame(add);
|
||||
};
|
||||
|
||||
/**
|
||||
* 初始化懒加载
|
||||
*/
|
||||
let initLazyLoad = () => {
|
||||
if (lload) lload.destroy();
|
||||
lload = new LazyLoad({
|
||||
threshold: 0,
|
||||
elements_selector: ".lazy",
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 开始自动滚动
|
||||
*/
|
||||
let startScroll = () => {
|
||||
const setScroll = () => {
|
||||
// 核心修复：每次都实时获取当前滚动位置，而不是用固定值
|
||||
let currentTop = window.scrollY || document.documentElement.scrollTop;
|
||||
|
||||
currentTop += scrollSpeed;
|
||||
window.scroll(0, currentTop);
|
||||
handlerId = requestAnimationFrame(setScroll);
|
||||
};
|
||||
handlerId = requestAnimationFrame(setScroll);
|
||||
};
|
||||
|
||||
/**
|
||||
* 停止自动滚动
|
||||
*/
|
||||
let stopScroll = () => {
|
||||
cancelAnimationFrame(handlerId);
|
||||
handlerId = null;
|
||||
};
|
||||
|
||||
/**
|
||||
* 统一开关函数（点击 + 空格共用）
|
||||
*/
|
||||
let toggleScroll = () => {
|
||||
if (handlerId) {
|
||||
stopScroll();
|
||||
} else {
|
||||
startScroll();
|
||||
}
|
||||
};
|
||||
|
||||
// ====================== 核心修改 ======================
|
||||
/**
|
||||
* 点击页面 → 开关滚动（开始/暂停）
|
||||
*/
|
||||
document.onclick = toggleScroll;
|
||||
|
||||
/**
|
||||
* 空格键 → 开关滚动（开始/暂停）
|
||||
*/
|
||||
document.onkeydown = (e) => {
|
||||
console.log("e: ", e);
|
||||
|
||||
if (e.keyCode === 32) {
|
||||
e.preventDefault();
|
||||
toggleScroll();
|
||||
}
|
||||
|
||||
// R键：重置速度
|
||||
if (e.keyCode === 82) {
|
||||
e.preventDefault();
|
||||
scrollSpeed = defaultSpeed;
|
||||
console.log("重置速度", scrollSpeed);
|
||||
}
|
||||
|
||||
// 上键：速度 +2
|
||||
if (e.keyCode === 40) {
|
||||
e.preventDefault();
|
||||
scrollSpeed += 2;
|
||||
console.log("当前速度：", scrollSpeed);
|
||||
}
|
||||
|
||||
// 下键：速度 -2（最低不小于默认 2）
|
||||
if (e.keyCode === 38) {
|
||||
e.preventDefault();
|
||||
if (scrollSpeed > defaultSpeed) {
|
||||
scrollSpeed -= 2;
|
||||
console.log("当前速度：", scrollSpeed);
|
||||
} else {
|
||||
console.log("已达到最低速度：", scrollSpeed);
|
||||
}
|
||||
}
|
||||
};
|
||||
// ======================================================
|
||||
|
||||
/**
|
||||
* 滚动到底部加载更多
|
||||
*/
|
||||
window.onscroll = () => {
|
||||
if (scrollLock) return;
|
||||
|
||||
const scrollHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
|
||||
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||||
const clientHeight = window.innerHeight || document.documentElement.clientHeight;
|
||||
|
||||
if (clientHeight + scrollTop >= scrollHeight - 150) {
|
||||
scrollLock = true;
|
||||
getHttpData();
|
||||
}
|
||||
};
|
||||
|
||||
// 初始化加载
|
||||
getHttpData();
|
||||
</script>
|
||||
</html>
|
||||
Reference in New Issue
Block a user