mirror of
https://github.com/handsomezhuzhu/handsomezhuzhu.github.io.git
synced 2026-02-20 20:00:14 +00:00
一些奇怪的更改
This commit is contained in:
@@ -1,125 +1,125 @@
|
||||
// 光标雨点效果配置文件
|
||||
// 你可以在这里定义不同的配置预设
|
||||
|
||||
import type { RainDropOptions } from '../cursor-rain/types'
|
||||
|
||||
// 预设配置
|
||||
export const rainPresets = {
|
||||
// 默认配置
|
||||
default: {
|
||||
maxDrops: 25,
|
||||
color: 'rgba(173, 216, 230, 0.6)',
|
||||
duration: [1.0, 2.0],
|
||||
dropSize: [3, 8],
|
||||
delay: 100,
|
||||
zIndex: 1000
|
||||
} as RainDropOptions,
|
||||
|
||||
// 轻量模式（适合低性能设备）
|
||||
light: {
|
||||
maxDrops: 15,
|
||||
color: 'rgba(173, 216, 230, 0.5)',
|
||||
duration: [1.2, 2.5],
|
||||
dropSize: [2, 6],
|
||||
delay: 150,
|
||||
zIndex: 1000
|
||||
} as RainDropOptions,
|
||||
|
||||
// 华丽模式
|
||||
fancy: {
|
||||
maxDrops: 40,
|
||||
color: 'rgba(173, 216, 230, 0.8)',
|
||||
duration: [0.8, 1.5],
|
||||
dropSize: [4, 12],
|
||||
delay: 50,
|
||||
zIndex: 1000
|
||||
} as RainDropOptions,
|
||||
|
||||
// 粉色主题
|
||||
pink: {
|
||||
maxDrops: 30,
|
||||
color: 'rgba(255, 182, 193, 0.7)',
|
||||
duration: [1.0, 2.0],
|
||||
dropSize: [3, 9],
|
||||
delay: 80,
|
||||
zIndex: 1000
|
||||
} as RainDropOptions,
|
||||
|
||||
// 绿色主题
|
||||
green: {
|
||||
maxDrops: 25,
|
||||
color: 'rgba(144, 238, 144, 0.7)',
|
||||
duration: [1.0, 2.0],
|
||||
dropSize: [3, 8],
|
||||
delay: 100,
|
||||
zIndex: 1000
|
||||
} as RainDropOptions,
|
||||
|
||||
// 金色主题
|
||||
gold: {
|
||||
maxDrops: 20,
|
||||
color: 'rgba(255, 215, 0, 0.6)',
|
||||
duration: [1.5, 2.5],
|
||||
dropSize: [2, 6],
|
||||
delay: 120,
|
||||
zIndex: 1000
|
||||
} as RainDropOptions,
|
||||
|
||||
// 移动端优化配置
|
||||
mobile: {
|
||||
maxDrops: 10,
|
||||
color: 'rgba(173, 216, 230, 0.5)',
|
||||
duration: [1.5, 3.0],
|
||||
dropSize: [2, 5],
|
||||
delay: 200,
|
||||
zIndex: 1000
|
||||
} as RainDropOptions
|
||||
}
|
||||
|
||||
// 根据设备类型自动选择配置
|
||||
export function getOptimalConfig(): RainDropOptions {
|
||||
if (typeof window === 'undefined') return rainPresets.default
|
||||
|
||||
// 检测移动设备
|
||||
const isMobile = window.innerWidth < 768 || /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
|
||||
|
||||
// 检测低性能设备（简单的启发式检测）
|
||||
const isLowPerformance = navigator.hardwareConcurrency && navigator.hardwareConcurrency < 4
|
||||
|
||||
if (isMobile) {
|
||||
return rainPresets.mobile
|
||||
} else if (isLowPerformance) {
|
||||
return rainPresets.light
|
||||
} else {
|
||||
return rainPresets.default
|
||||
}
|
||||
}
|
||||
|
||||
// 主题配色方案
|
||||
export const colorThemes = {
|
||||
blue: 'rgba(100, 149, 237, 0.7)',
|
||||
lightBlue: 'rgba(173, 216, 230, 0.6)',
|
||||
pink: 'rgba(255, 182, 193, 0.7)',
|
||||
green: 'rgba(144, 238, 144, 0.7)',
|
||||
gold: 'rgba(255, 215, 0, 0.6)',
|
||||
purple: 'rgba(147, 112, 219, 0.7)',
|
||||
orange: 'rgba(255, 165, 0, 0.7)',
|
||||
red: 'rgba(255, 99, 99, 0.7)'
|
||||
}
|
||||
|
||||
// 动态切换主题的函数
|
||||
export function switchRainTheme(effect: any, themeName: keyof typeof colorThemes) {
|
||||
const color = colorThemes[themeName]
|
||||
if (color && effect) {
|
||||
effect.updateOptions({ color })
|
||||
|
||||
// 同时更新CSS类名以应用对应的样式
|
||||
const container = document.querySelector('.cursor-rain-container')
|
||||
if (container) {
|
||||
// 移除所有主题类
|
||||
container.classList.remove('rain-theme-blue', 'rain-theme-pink', 'rain-theme-green', 'rain-theme-gold', 'rain-theme-rainbow')
|
||||
// 添加新主题类
|
||||
container.classList.add(`rain-theme-${themeName}`)
|
||||
}
|
||||
}
|
||||
}
|
||||
// 光标雨点效果配置文件
|
||||
// 你可以在这里定义不同的配置预设
|
||||
|
||||
import type { RainDropOptions } from '../cursor-rain/types'
|
||||
|
||||
// 预设配置
|
||||
export const rainPresets = {
|
||||
// 默认配置
|
||||
default: {
|
||||
maxDrops: 25,
|
||||
color: 'rgba(173, 216, 230, 0.6)',
|
||||
duration: [1.0, 2.0],
|
||||
dropSize: [3, 8],
|
||||
delay: 100,
|
||||
zIndex: 1000
|
||||
} as RainDropOptions,
|
||||
|
||||
// 轻量模式（适合低性能设备）
|
||||
light: {
|
||||
maxDrops: 15,
|
||||
color: 'rgba(173, 216, 230, 0.5)',
|
||||
duration: [1.2, 2.5],
|
||||
dropSize: [2, 6],
|
||||
delay: 150,
|
||||
zIndex: 1000
|
||||
} as RainDropOptions,
|
||||
|
||||
// 华丽模式
|
||||
fancy: {
|
||||
maxDrops: 40,
|
||||
color: 'rgba(173, 216, 230, 0.8)',
|
||||
duration: [0.8, 1.5],
|
||||
dropSize: [4, 12],
|
||||
delay: 50,
|
||||
zIndex: 1000
|
||||
} as RainDropOptions,
|
||||
|
||||
// 粉色主题
|
||||
pink: {
|
||||
maxDrops: 30,
|
||||
color: 'rgba(255, 182, 193, 0.7)',
|
||||
duration: [1.0, 2.0],
|
||||
dropSize: [3, 9],
|
||||
delay: 80,
|
||||
zIndex: 1000
|
||||
} as RainDropOptions,
|
||||
|
||||
// 绿色主题
|
||||
green: {
|
||||
maxDrops: 25,
|
||||
color: 'rgba(144, 238, 144, 0.7)',
|
||||
duration: [1.0, 2.0],
|
||||
dropSize: [3, 8],
|
||||
delay: 100,
|
||||
zIndex: 1000
|
||||
} as RainDropOptions,
|
||||
|
||||
// 金色主题
|
||||
gold: {
|
||||
maxDrops: 20,
|
||||
color: 'rgba(255, 215, 0, 0.6)',
|
||||
duration: [1.5, 2.5],
|
||||
dropSize: [2, 6],
|
||||
delay: 120,
|
||||
zIndex: 1000
|
||||
} as RainDropOptions,
|
||||
|
||||
// 移动端优化配置
|
||||
mobile: {
|
||||
maxDrops: 10,
|
||||
color: 'rgba(173, 216, 230, 0.5)',
|
||||
duration: [1.5, 3.0],
|
||||
dropSize: [2, 5],
|
||||
delay: 200,
|
||||
zIndex: 1000
|
||||
} as RainDropOptions
|
||||
}
|
||||
|
||||
// 根据设备类型自动选择配置
|
||||
export function getOptimalConfig(): RainDropOptions {
|
||||
if (typeof window === 'undefined') return rainPresets.default
|
||||
|
||||
// 检测移动设备
|
||||
const isMobile = window.innerWidth < 768 || /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
|
||||
|
||||
// 检测低性能设备（简单的启发式检测）
|
||||
const isLowPerformance = navigator.hardwareConcurrency && navigator.hardwareConcurrency < 4
|
||||
|
||||
if (isMobile) {
|
||||
return rainPresets.mobile
|
||||
} else if (isLowPerformance) {
|
||||
return rainPresets.light
|
||||
} else {
|
||||
return rainPresets.default
|
||||
}
|
||||
}
|
||||
|
||||
// 主题配色方案
|
||||
export const colorThemes = {
|
||||
blue: 'rgba(100, 149, 237, 0.7)',
|
||||
lightBlue: 'rgba(173, 216, 230, 0.6)',
|
||||
pink: 'rgba(255, 182, 193, 0.7)',
|
||||
green: 'rgba(144, 238, 144, 0.7)',
|
||||
gold: 'rgba(255, 215, 0, 0.6)',
|
||||
purple: 'rgba(147, 112, 219, 0.7)',
|
||||
orange: 'rgba(255, 165, 0, 0.7)',
|
||||
red: 'rgba(255, 99, 99, 0.7)'
|
||||
}
|
||||
|
||||
// 动态切换主题的函数
|
||||
export function switchRainTheme(effect: any, themeName: keyof typeof colorThemes) {
|
||||
const color = colorThemes[themeName]
|
||||
if (color && effect) {
|
||||
effect.updateOptions({ color })
|
||||
|
||||
// 同时更新CSS类名以应用对应的样式
|
||||
const container = document.querySelector('.cursor-rain-container')
|
||||
if (container) {
|
||||
// 移除所有主题类
|
||||
container.classList.remove('rain-theme-blue', 'rain-theme-pink', 'rain-theme-green', 'rain-theme-gold', 'rain-theme-rainbow')
|
||||
// 添加新主题类
|
||||
container.classList.add(`rain-theme-${themeName}`)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user