118 lines
3.2 KiB
JavaScript
118 lines
3.2 KiB
JavaScript
const Panel_left = document.getElementById('leftPanel');
|
|
const Panel_right = document.getElementById('rightPanel');
|
|
|
|
// 触摸滑动相关变量
|
|
let startX = 0;
|
|
let isSwiping = false;
|
|
|
|
// 判断是否为移动端
|
|
function isMobile() {
|
|
return window.innerWidth<= 800;
|
|
}
|
|
|
|
// 切换面板函数
|
|
function switchPanel() {
|
|
if (!Panel_left || !Panel_right) return;
|
|
if (!isMobile()) return;
|
|
|
|
const leftDisplay = window.getComputedStyle(Panel_left).display;
|
|
const isLeftVisible = leftDisplay !== 'none';
|
|
|
|
if (isLeftVisible) {
|
|
// 从左侧切换到右侧
|
|
Panel_left.style.transform = 'translateX(-100%)';
|
|
Panel_right.style.display = 'flex';
|
|
Panel_right.style.transform = 'translateX(100%)';
|
|
|
|
setTimeout(() => {
|
|
Panel_right.style.transform = 'translateX(0)';
|
|
}, 50);
|
|
|
|
setTimeout(() => {
|
|
Panel_left.style.display = 'none';
|
|
Panel_left.style.transform = 'translateX(0)';
|
|
}, 300);
|
|
} else {
|
|
// 从右侧切换到左侧
|
|
Panel_right.style.transform = 'translateX(100%)';
|
|
Panel_left.style.display = 'flex';
|
|
Panel_left.style.transform = 'translateX(-100%)';
|
|
|
|
setTimeout(() => {
|
|
Panel_left.style.transform = 'translateX(0)';
|
|
}, 50);
|
|
|
|
setTimeout(() => {
|
|
Panel_right.style.display = 'none';
|
|
Panel_right.style.transform = 'translateX(0)';
|
|
}, 300);
|
|
}
|
|
}
|
|
|
|
// 绑定触摸事件
|
|
function bindTouchEvents() {
|
|
if (!Panel_left || !Panel_right) return;
|
|
|
|
// 为左右面板都添加触摸事件
|
|
const panels = [Panel_left, Panel_right];
|
|
|
|
panels.forEach(panel => {
|
|
panel.addEventListener('touchstart', handleTouchStart, { passive: true });
|
|
panel.addEventListener('touchmove', handleTouchMove, { passive: false });
|
|
panel.addEventListener('touchend', handleTouchEnd);
|
|
});
|
|
}
|
|
|
|
// 处理触摸开始
|
|
function handleTouchStart(e) {
|
|
if (!isMobile()) return;
|
|
startX = e.touches[0].clientX;
|
|
isSwiping = false;
|
|
}
|
|
|
|
// 处理触摸移动
|
|
function handleTouchMove(e) {
|
|
if (!isMobile() || !startX) return;
|
|
|
|
const currentX = e.touches[0].clientX;
|
|
const diffX = currentX - startX;
|
|
|
|
// 判断是否为滑动操作
|
|
if (Math.abs(diffX) > 30) {
|
|
isSwiping = true;
|
|
e.preventDefault(); // 阻止页面滚动
|
|
}
|
|
}
|
|
|
|
// 处理触摸结束
|
|
function handleTouchEnd(e) {
|
|
if (!isMobile() || !isSwiping || !startX) return;
|
|
|
|
const endX = e.changedTouches[0].clientX;
|
|
const diffX = endX - startX;
|
|
|
|
// 判断滑动方向
|
|
if (Math.abs(diffX) > 50) {
|
|
if (diffX > 0) {
|
|
// 向右滑动，显示左侧面板
|
|
const leftDisplay = window.getComputedStyle(Panel_left).display;
|
|
if (leftDisplay === 'none') {
|
|
switchPanel();
|
|
}
|
|
} else {
|
|
// 向左滑动，显示右侧面板
|
|
const leftDisplay = window.getComputedStyle(Panel_left).display;
|
|
if (leftDisplay !== 'none') {
|
|
switchPanel();
|
|
}
|
|
}
|
|
}
|
|
|
|
startX = 0;
|
|
isSwiping = false;
|
|
}
|
|
|
|
// 页面加载完成后初始化
|
|
window.addEventListener('DOMContentLoaded', () => {
|
|
bindTouchEvents();
|
|
}); |