feat(about): 优化移动端社交链接与悬浮按钮交互
- 重构兴趣列表样式，适配不同屏幕尺寸 - 增强移动端社交链接黑夜模式下的视觉效果 - 实现悬浮按钮可拖拽功能，提升用户体验 - 集成 Artalk 评论组件并定制主题样式 - 调整移动端布局与响应式设计细节 - 更新页面标题与功能按钮文本描述 - 修复部分组件在黑夜模式下的显示问题
This commit is contained in:
hehh
@@ -246,7 +246,7 @@
|
||||
|
||||
<!-- 移动端悬浮功能按钮 -->
|
||||
<div class="mobile-fab">
|
||||
<button id="fab-main" class="fab-main" aria-label="Actions"><i class="ri-magic-line"></i><span class="fab-label">More</span></button>
|
||||
<button id="fab-main" class="fab-main" aria-label="Actions"><i class="ri-magic-line"></i><span class="fab-label">Tools</span></button>
|
||||
<div class="fab-menu" id="fab-menu">
|
||||
<button id="fab-lang" class="fab-item"><i class="ri-translate-2"></i><span class="fab-text">Lang</span></button>
|
||||
<button id="fab-theme" class="fab-item"><i class="ri-moon-line"></i><span class="fab-text">Theme</span></button>
|
||||
|
||||
284
css/about.css
284
css/about.css
@@ -903,22 +903,21 @@ body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
@media (min-width: 769px) {
|
||||
.interest-list {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 15px;
|
||||
/*height: 100%; */
|
||||
grid-template-columns: 1fr;
|
||||
gap: 12px;
|
||||
margin-top: 1rem;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.interest-item {
|
||||
background: rgba(128, 128, 128, 0.05);
|
||||
padding: 5px;
|
||||
border-radius: 2px;
|
||||
padding: 12px 16px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
gap: 15px;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
@@ -927,7 +926,7 @@ body {
|
||||
}
|
||||
|
||||
.i-emoji {
|
||||
font-size: 1.6rem;
|
||||
font-size: 2rem;
|
||||
color: var(--text-primary);
|
||||
-webkit-text-fill-color: initial;
|
||||
}
|
||||
@@ -936,11 +935,12 @@ body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
/* 添加 min-width: 0 防止溢出 */
|
||||
.i-text strong {
|
||||
font-size: 0.9rem;
|
||||
font-size: 1.1rem;
|
||||
color: var(--text-primary);
|
||||
/* 为兴趣标签添加渐变色彩 */
|
||||
background: var(--gradient-1);
|
||||
@@ -948,10 +948,11 @@ body {
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
-webkit-text-fill-color: transparent;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.i-text span:not(.i-emoji) {
|
||||
font-size: 0.75rem;
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-tertiary);
|
||||
/* 为兴趣描述添加渐变色彩 */
|
||||
background: var(--gradient-2);
|
||||
@@ -959,6 +960,25 @@ body {
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
-webkit-text-fill-color: transparent;
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.interest-list {
|
||||
grid-template-columns: 1fr;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.i-text {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.i-text strong, .i-text span {
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
@@ -1169,25 +1189,30 @@ body {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 修复平板模式下兴趣模块的高度问题 */
|
||||
.interest-list {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
max-height: 150px; /* 限制高度 */
|
||||
overflow: hidden;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 12px;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.interest-item {
|
||||
padding: 12px 16px;
|
||||
border-radius: 12px;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.i-emoji {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.i-text {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.i-text strong, .i-text span {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 兴趣模块文本渐变色彩 */
|
||||
.i-text strong {
|
||||
font-size: 1.1rem;
|
||||
white-space: nowrap;
|
||||
background: var(--gradient-1);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
@@ -1195,6 +1220,8 @@ body {
|
||||
}
|
||||
|
||||
.i-text span {
|
||||
font-size: 0.9rem;
|
||||
white-space: normal;
|
||||
background: var(--gradient-2);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
@@ -1524,20 +1551,71 @@ body {
|
||||
.i-text span:not(.i-emoji) { flex: 1 1 100%; white-space: normal; }
|
||||
}
|
||||
|
||||
@media (min-width: 769px) {
|
||||
.social-dock { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; justify-items: center; }
|
||||
.s-icon { width: 42px; height: 42px; }
|
||||
.s-icon i { font-size: 1.6rem; }
|
||||
@media (max-width: 768px) {
|
||||
.quote-box p.quote-collapsed {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.quote-box p.quote-collapsed { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
|
||||
/* 增强移动端社交链接黑夜模式下的发光效果 */
|
||||
[data-theme="night"] .ms-btn:nth-child(1) {
|
||||
box-shadow: 0 0 20px rgba(132, 250, 176, 0.8);
|
||||
}
|
||||
|
||||
[data-theme="night"] .ms-btn:nth-child(2) {
|
||||
box-shadow: 0 0 20px rgba(246, 211, 101, 0.8);
|
||||
}
|
||||
|
||||
[data-theme="night"] .ms-btn:nth-child(3) {
|
||||
box-shadow: 0 0 20px rgba(255, 154, 158, 0.8);
|
||||
}
|
||||
|
||||
[data-theme="night"] .ms-btn:nth-child(4) {
|
||||
box-shadow: 0 0 20px rgba(168, 237, 234, 0.8);
|
||||
}
|
||||
|
||||
[data-theme="night"] .ms-btn:nth-child(5) {
|
||||
box-shadow: 0 0 20px rgba(210, 153, 194, 0.8);
|
||||
}
|
||||
|
||||
[data-theme="night"] .ms-btn:nth-child(6) {
|
||||
box-shadow: 0 0 20px rgba(161, 196, 253, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
/* 确保在非移动端隐藏 .mobile-social */
|
||||
@media (min-width: 769px) {
|
||||
.mobile-social {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.social-dock {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 12px;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.s-icon {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
}
|
||||
|
||||
.s-icon i {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.interest-list { grid-auto-rows: minmax(80px, auto); }
|
||||
.interest-item { padding: 14px; border-radius: 12px; gap: 12px; }
|
||||
.i-emoji { font-size: 1.6rem; }
|
||||
.i-text strong { display: block; }
|
||||
|
||||
|
||||
.i-text span:not(.i-emoji) { display: block; }
|
||||
|
||||
/* =========================================
|
||||
@@ -1646,9 +1724,10 @@ body {
|
||||
}
|
||||
.social-dock .s-icon { color: var(--text-primary); }
|
||||
.social-dock .s-icon i { background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: initial !important; color: currentColor !important; text-shadow: none !important; }
|
||||
.mobile-fab { position: fixed; right: 16px; bottom: 88px; z-index: 1100; }
|
||||
css
|
||||
编辑
|
||||
|
||||
|
||||
|
||||
|
||||
/* ========== 全局基础样式（白天 & 黑夜通用） ========== */
|
||||
.fab-main {
|
||||
display: flex;
|
||||
@@ -1686,6 +1765,59 @@ css
|
||||
padding: 8px 12px;
|
||||
border: var(--glass-border);
|
||||
box-shadow: var(--glass-shadow);
|
||||
}
|
||||
|
||||
/* 添加Artalk评论组件的自定义样式 */
|
||||
.artalk-comment {
|
||||
--at-color-main: var(--accent) !important;
|
||||
--at-color-font: var(--text-primary) !important;
|
||||
--at-color-meta: var(--text-secondary) !important;
|
||||
--at-color-border: rgba(128, 128, 128, 0.1) !important;
|
||||
--at-color-bg: var(--glass-bg) !important;
|
||||
--at-color-bg-grey: rgba(128, 128, 128, 0.05) !important;
|
||||
--at-color-bg-hover: rgba(128, 128, 128, 0.1) !important;
|
||||
--at-color-bg-light: var(--glass-bg) !important;
|
||||
--at-color-shadow: var(--glass-shadow) !important;
|
||||
}
|
||||
|
||||
[data-theme="night"] .artalk-comment {
|
||||
--at-color-font: var(--text-primary) !important;
|
||||
--at-color-meta: var(--text-secondary) !important;
|
||||
--at-color-border: rgba(255, 255, 255, 0.08) !important;
|
||||
--at-color-bg: var(--glass-bg) !important;
|
||||
--at-color-bg-grey: rgba(255, 255, 255, 0.05) !important;
|
||||
--at-color-bg-hover: rgba(255, 255, 255, 0.1) !important;
|
||||
--at-color-bg-light: var(--glass-bg) !important;
|
||||
--at-color-shadow: var(--glass-shadow) !important;
|
||||
}
|
||||
|
||||
.artalk-comment .atk-main-editor {
|
||||
backdrop-filter: blur(var(--glass-blur));
|
||||
-webkit-backdrop-filter: blur(var(--glass-blur));
|
||||
border-radius: var(--radius) !important;
|
||||
}
|
||||
|
||||
.artalk-comment .atk-comment-wrap {
|
||||
backdrop-filter: blur(var(--glass-blur));
|
||||
-webkit-backdrop-filter: blur(var(--glass-blur));
|
||||
border-radius: var(--radius) !important;
|
||||
}
|
||||
|
||||
/* 确保评论区域适配白天/黑夜模式 */
|
||||
#artalk-container {
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
#artalk-container .atk-main-editor {
|
||||
background: var(--glass-bg);
|
||||
border: var(--glass-border);
|
||||
box-shadow: var(--glass-shadow);
|
||||
}
|
||||
|
||||
#artalk-container .atk-comment-wrap {
|
||||
background: var(--glass-bg);
|
||||
border: var(--glass-border);
|
||||
box-shadow: var(--glass-shadow);
|
||||
opacity: 0.9;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
@@ -2402,6 +2534,24 @@ body {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* --- Mobile Social --- */
|
||||
.mobile-social {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.ms-btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: rgba(128, 128, 128, 0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.mbti-tags .tag {
|
||||
background: none;
|
||||
border: none;
|
||||
@@ -2624,6 +2774,67 @@ body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
.interest-list {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 15px;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.interest-item {
|
||||
background: rgba(128, 128, 128, 0.05);
|
||||
padding: 15px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.interest-item:hover {
|
||||
background: rgba(128, 128, 128, 0.1);
|
||||
}
|
||||
|
||||
.i-emoji {
|
||||
font-size: 2rem;
|
||||
color: var(--text-primary);
|
||||
-webkit-text-fill-color: initial;
|
||||
}
|
||||
|
||||
.i-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
/* 添加 min-width: 0 防止溢出 */
|
||||
.i-text strong {
|
||||
font-size: 1.1rem;
|
||||
color: var(--text-primary);
|
||||
/* 为兴趣标签添加渐变色彩 */
|
||||
background: var(--gradient-1);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
-webkit-text-fill-color: transparent;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.i-text span:not(.i-emoji) {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-tertiary);
|
||||
/* 为兴趣描述添加渐变色彩 */
|
||||
background: var(--gradient-2);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
-webkit-text-fill-color: transparent;
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.interest-list {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
@@ -2682,6 +2893,11 @@ body {
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
/* 移动端社交链接 */
|
||||
.mobile-social {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
5. Content Sections (Blog/Github)
|
||||
========================================= */
|
||||
@@ -3367,8 +3583,10 @@ body {
|
||||
}
|
||||
.social-dock .s-icon { color: var(--text-primary); }
|
||||
.social-dock .s-icon i { background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: initial !important; color: currentColor !important; text-shadow: none !important; }
|
||||
.mobile-fab { position: fixed; right: 16px; bottom: 88px; z-index: 1100; }
|
||||
.fab-main { display: flex; align-items: center; gap: 6px; background: var(--accent); color: #fff; border: none; border-radius: 22px; padding: 10px 14px; box-shadow: 0 8px 18px rgba(0,0,0,0.25); opacity: 0.8; }
|
||||
.mobile-fab { position: fixed; right: 16px; bottom: 88px; z-index: 1100; cursor: move; user-select: none; display: block !important; }
|
||||
.fab-main { display: flex; align-items: center; gap: 6px; background: var(--accent); color: #fff; border: none; border-radius: 22px; padding: 10px 14px; box-shadow: 0 8px 18px rgba(0,0,0,0.25); opacity: 0.9; transition: all 0.3s ease; }
|
||||
.fab-main:hover { opacity: 1; transform: scale(1.05); }
|
||||
.fab-main:active { transform: scale(0.95); }
|
||||
.fab-label { font-size: 12px; }
|
||||
.fab-menu { display: none; flex-direction: column; gap: 10px; margin-top: 10px; }
|
||||
.fab-item { display: flex; align-items: center; gap: 6px; background: var(--glass-bg); border-radius: 18px; padding: 8px 12px; border: var(--glass-border); box-shadow: var(--glass-shadow); opacity: 0.8; }
|
||||
|
||||
150
js/about.js
150
js/about.js
@@ -470,8 +470,8 @@ class UIManager {
|
||||
try {
|
||||
Artalk.init({
|
||||
el: '#artalk-container',
|
||||
pageKey: '/about',
|
||||
pageTitle: 'About Me',
|
||||
pageKey: '/about.html',
|
||||
pageTitle: '关于我 - Honesty',
|
||||
server: window.SiteConfig.artalk.server,
|
||||
site: window.SiteConfig.artalk.site,
|
||||
darkMode: document.documentElement.getAttribute('data-theme') === 'night'
|
||||
@@ -485,50 +485,7 @@ class UIManager {
|
||||
}
|
||||
}
|
||||
|
||||
initBioToggle() {
|
||||
const el = document.querySelector('.bio-text');
|
||||
const btn = document.getElementById('bio-toggle');
|
||||
const qEl = document.querySelector('.quote-box p');
|
||||
if (!el || !btn) return;
|
||||
const assess = () => {
|
||||
el.classList.add('collapsed');
|
||||
if (qEl) qEl.classList.add('quote-collapsed');
|
||||
const needsToggle = (el.scrollHeight > el.clientHeight) || (qEl && qEl.scrollHeight > qEl.clientHeight) || (window.innerWidth < 480 && ((el.textContent || '').length + (qEl?.textContent?.length || 0)) > 120);
|
||||
if (needsToggle) {
|
||||
btn.style.display = 'inline-block';
|
||||
} else {
|
||||
btn.style.display = 'none';
|
||||
el.classList.remove('collapsed');
|
||||
if (qEl) qEl.classList.remove('quote-collapsed');
|
||||
}
|
||||
};
|
||||
assess();
|
||||
window.addEventListener('resize', () => assess(), {passive: true});
|
||||
btn.addEventListener('click', () => {
|
||||
el.classList.toggle('collapsed');
|
||||
if (qEl) qEl.classList.toggle('quote-collapsed');
|
||||
});
|
||||
}
|
||||
|
||||
initNavInteraction() {
|
||||
const nav = document.querySelector('.glass-nav');
|
||||
if (!nav) return;
|
||||
const onScroll = () => {
|
||||
const y = window.scrollY || document.documentElement.scrollTop;
|
||||
nav.classList.toggle('nav-scrolled', y > 30);
|
||||
};
|
||||
onScroll();
|
||||
window.addEventListener('scroll', onScroll, {passive: true});
|
||||
}
|
||||
|
||||
initProfileGradient() {
|
||||
const name = document.querySelector('.hero-name');
|
||||
const role = document.querySelector('.hero-role');
|
||||
const loc = document.querySelector('.location-tag');
|
||||
if (name) name.classList.add('grad-text-1', 'night-glow', 'glow-cycle');
|
||||
if (role) role.classList.add('grad-text-2', 'night-glow', 'glow-cycle');
|
||||
if (loc) loc.classList.add('grad-text-3', 'night-glow', 'glow-cycle');
|
||||
}
|
||||
|
||||
initTechCloud() {
|
||||
const container = document.getElementById('tech-container');
|
||||
@@ -662,11 +619,14 @@ class UIManager {
|
||||
const fTheme = document.getElementById('fab-theme');
|
||||
const fMusic = document.getElementById('fab-music');
|
||||
if (!main || !menu || !fLang || !fTheme || !fMusic) return;
|
||||
|
||||
// 添加拖拽功能
|
||||
this.initDraggableFab();
|
||||
|
||||
const updateLabels = () => {
|
||||
const lang = getStoredLanguage();
|
||||
const theme = getStoredTheme();
|
||||
fLang.querySelector('.fab-text').textContent = lang === 'zh' ? 'English' : '中文';
|
||||
console.log('updateLabels >>>>>>> ', theme);
|
||||
fTheme.querySelector('.fab-text').textContent = theme === 'night' ? 'Day' : 'Night';
|
||||
const playing = (this.audio && !this.audio.paused);
|
||||
fMusic.querySelector('.fab-text').textContent = lang === 'zh' ? (playing ? '暂停' : '播放') : (playing ? 'Pause' : 'Play');
|
||||
@@ -701,6 +661,104 @@ class UIManager {
|
||||
updateLabels();
|
||||
}
|
||||
|
||||
// 初始化可拖拽悬浮按钮
|
||||
initDraggableFab() {
|
||||
const fab = document.querySelector('.mobile-fab');
|
||||
if (!fab) return;
|
||||
|
||||
let isDragging = false;
|
||||
let currentX;
|
||||
let currentY;
|
||||
let initialX;
|
||||
let initialY;
|
||||
let xOffset = 0;
|
||||
let yOffset = 0;
|
||||
let fabWidth = fab.offsetWidth;
|
||||
let fabHeight = fab.offsetHeight;
|
||||
let windowWidth = window.innerWidth;
|
||||
let windowHeight = window.innerHeight;
|
||||
|
||||
// 设置初始位置为距离底部1/3处
|
||||
function setInitialPosition() {
|
||||
windowWidth = window.innerWidth;
|
||||
windowHeight = window.innerHeight;
|
||||
fabWidth = fab.offsetWidth;
|
||||
fabHeight = fab.offsetHeight;
|
||||
|
||||
// 初始位置：右侧16px，距离底部1/3
|
||||
const initialYPos = windowHeight - (windowHeight / 3) - fabHeight / 2;
|
||||
xOffset = windowWidth - 16 - fabWidth; // 距离右边16px
|
||||
yOffset = initialYPos;
|
||||
|
||||
setTranslate(xOffset, yOffset, fab);
|
||||
}
|
||||
|
||||
// 页面加载时设置初始位置
|
||||
setInitialPosition();
|
||||
|
||||
// 窗口大小改变时更新位置
|
||||
window.addEventListener('resize', setInitialPosition);
|
||||
|
||||
// 触摸开始事件
|
||||
fab.addEventListener('touchstart', dragStart, false);
|
||||
fab.addEventListener('mousedown', dragStart, false);
|
||||
|
||||
// 拖拽移动事件
|
||||
document.addEventListener('touchmove', drag, { passive: false });
|
||||
document.addEventListener('mousemove', drag);
|
||||
|
||||
// 拖拽结束事件
|
||||
document.addEventListener('touchend', dragEnd, false);
|
||||
document.addEventListener('mouseup', dragEnd, false);
|
||||
|
||||
function dragStart(e) {
|
||||
if (e.type === 'touchstart') {
|
||||
initialX = e.touches[0].clientX - xOffset;
|
||||
initialY = e.touches[0].clientY - yOffset;
|
||||
} else {
|
||||
initialX = e.clientX - xOffset;
|
||||
initialY = e.clientY - yOffset;
|
||||
}
|
||||
|
||||
if (e.target === fab || fab.contains(e.target)) {
|
||||
isDragging = true;
|
||||
}
|
||||
}
|
||||
|
||||
function drag(e) {
|
||||
if (isDragging) {
|
||||
e.preventDefault();
|
||||
|
||||
if (e.type === 'touchmove') {
|
||||
currentX = e.touches[0].clientX - initialX;
|
||||
currentY = e.touches[0].clientY - initialY;
|
||||
} else {
|
||||
currentX = e.clientX - initialX;
|
||||
currentY = e.clientY - initialY;
|
||||
}
|
||||
|
||||
xOffset = currentX;
|
||||
yOffset = currentY;
|
||||
|
||||
// 限制在屏幕范围内
|
||||
currentX = Math.max(0, Math.min(currentX, windowWidth - fabWidth));
|
||||
currentY = Math.max(0, Math.min(currentY, windowHeight - fabHeight));
|
||||
|
||||
setTranslate(currentX, currentY, fab);
|
||||
}
|
||||
}
|
||||
|
||||
function dragEnd() {
|
||||
initialX = currentX;
|
||||
initialY = currentY;
|
||||
isDragging = false;
|
||||
}
|
||||
|
||||
function setTranslate(xPos, yPos, el) {
|
||||
el.style.transform = 'translate3d(' + xPos + 'px, ' + yPos + 'px, 0)';
|
||||
}
|
||||
}
|
||||
|
||||
initAudio() {
|
||||
const el = document.getElementById('site-audio');
|
||||
if (!el) return;
|
||||
|
||||
Reference in New Issue
Block a user