本项目是一个基于HTML、CSS和JavaScript实现的交互式鼠标跟随效果网页应用。它通过多种视觉模式展示了鼠标位置的动态响应效果，为用户提供了丰富的自定义选项和流畅的交互体验。该应用不仅是一个技术演示，更是一个可实际使用的创意工具，适用于网页设计、用户界面展示和互动艺术创作场景。
核心功能特点
1. 多样化的跟随模式
轨迹跟随：创建多个元素形成渐变的跟随轨迹
粒子效果：生成随机运动的粒子群模拟自然现象
磁性吸附：元素以波浪形吸附在鼠标周围
彩虹轨迹：色彩渐变并旋转的跟随效果 每种模式都经过精心设计，确保视觉流畅性和性能平衡。
2. 实时控制面板
用户可以通过直观的界面调整：
跟随元素数量（1-20个）
动画速度（从"很慢"到"极快"）
元素大小（5-30像素）
透明度（10%-100%）
颜色主题（蓝色系、彩虹色等） 所有调整即时生效，无需页面刷新。
3. 个性化设置系统
完整的设置菜单保存用户偏好
使用localStorage持久化设置
重置功能快速恢复默认值
响应式设计适配不同屏幕尺寸
技术实现亮点
1. 性能优化
使用requestAnimationFrame实现平滑动画
自动清理无用元素防止内存泄漏
优化CSS选择器和属性选择器
减少重绘和回流操作
2. 现代UI设计
毛玻璃效果（backdrop-blur）
渐变色背景
流畅的过渡动画
自定义滚动条样式
3. 代码结构
采用面向对象设计模式
模块化功能实现
清晰的注释和文档
事件驱动架构
应用场景
网页设计：作为创意元素增强页面互动性
用户研究：测试用户与界面的交互模式
教育演示：展示JavaScript动画原理
艺术创作：生成动态视觉艺术作品
使用说明
在演示区域移动鼠标查看效果
通过控制面板调整参数
点击设置按钮访问高级选项
保存偏好设置以便下次使用
本项目展示了现代Web,技术的潜力，将简单的鼠标跟随效果转化为一个功能丰富、视觉吸引人的交互式体验。通过合理的架构设计和性能优化，即使在移动设备上也能保持流畅运行，为开发者提供了一个可扩展的模板，用于创建更复杂的交互效果。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>优雅鼠标跟随效果</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body class="bg-gradient-to-br from-purple-900 via-blue-800 to-indigo-900 min-h-screen text-white overflow-hidden">
<!-- 导航栏 -->
<nav class="fixed top-0 w-full bg-black/30 backdrop-blur-md z-50 p-4">
<div class="container mx-auto flex justify-between items-center">
<h1 class="text-2xl font-bold">✨ 鼠标跟随效果</h1>
<div class="flex space-x-4">
<button id="settingsBtn" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg transition-all">
<i class="fas fa-cog mr-2"></i>设置
</button>
</div>
</div>
</nav>
<!-- 主内容区域 -->
<main class="container mx-auto pt-20 px-4">
<!-- 控制面板 -->
<div class="bg-white/10 backdrop-blur-md rounded-2xl p-6 mb-8">
<h2 class="text-xl font-semibold mb-4">控制面板</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div>
<label class="block text-sm mb-2">跟随模式</label>
<select id="followMode" class="w-full bg-gray-800 rounded-lg p-2">
<option value="trail">轨迹跟随</option>
<option value="particles">粒子效果</option>
<option value="magnetic">磁性吸附</option>
<option value="rainbow">彩虹轨迹</option>
</select>
</div>
<div>
<label class="block text-sm mb-2">元素数量</label>
<input type="range" id="elementCount" min="1" max="20" value="5" class="w-full">
<span id="countDisplay" class="text-sm">5</span>
</div>
<div>
<label class="block text-sm mb-2">动画速度</label>
<input type="range" id="animationSpeed" min="1" max="10" value="5" class="w-full">
<span id="speedDisplay" class="text-sm">中等</span>
</div>
</div>
</div>
<!-- 演示区域 -->
<div class="bg-black/20 backdrop-blur-md rounded-2xl p-8 h-96 relative overflow-hidden" id="demoArea">
<div class="text-center absolute inset-0 flex items-center justify-center">
<p class="text-gray-300">在此区域移动鼠标查看效果</p>
</div>
</div>
<!-- 状态信息 -->
<div class="mt-4 text-center text-gray-300" id="statusInfo">
鼠标位置: (0, 0) | 跟随元素: 5 | 模式: 轨迹跟随
</div>
</main>
<!-- 设置模态框 -->
<div id="settingsModal" class="fixed inset-0 bg-black/50 backdrop-blur-md hidden z-50">
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-gray-800 rounded-2xl p-6 w-96">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-semibold">效果设置</h3>
<button id="closeSettings" class="text-gray-400 hover:text-white">
<i class="fas fa-times"></i>
</button>
</div>
<div class="space-y-4">
<div>
<label class="block text-sm mb-2">元素大小</label>
<input type="range" id="elementSize" min="5" max="30" value="15" class="w-full">
</div>
<div>
<label class="block text-sm mb-2">透明度</label>
<input type="range" id="opacity" min="10" max="100" value="80" class="w-full">
</div>
<div>
<label class="block text-sm mb-2">颜色主题</label>
<select id="colorTheme" class="w-full bg-gray-700 rounded-lg p-2">
<option value="blue">蓝色系</option>
<option value="rainbow">彩虹色</option>
<option value="pastel">柔和色</option>
<option value="neon">霓虹色</option>
</select>
</div>
</div>
<div class="mt-6 flex justify-end space-x-2">
<button id="resetSettings" class="px-4 py-2 bg-gray-600 rounded-lg hover:bg-gray-700">
重置
</button>
<button id="saveSettings" class="px-4 py-2 bg-blue-600 rounded-lg hover:bg-blue-700">
保存
</button>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
<code_end>
<code_start>
project_name=鼠标跟随效果
filename=styles.css
title=鼠标跟随效果样式文件
entrypoint=false
runnable=false
project_final_file=false
>
/* 自定义样式补充 */
.follower {
position: fixed;
pointer-events: none;
border-radius: 50%;
transition: transform 0.1s ease-out;
z-index: 1000;
}
.trail-element {
position: fixed;
pointer-events: none;
border-radius: 50%;
background: linear-gradient(45deg, #667eea, #764ba2);
opacity: 0.8;
z-index: 999;
}
.particle {
position: fixed;
pointer-events: none;
border-radius: 50%;
background: radial-gradient(circle, #ff6b6b, #ffa726);
animation: particleFloat 2s ease-out forwards;
z-index: 998;
}
.magnetic-element {
position: fixed;
pointer-events: none;
border-radius: 50%;
background: linear-gradient(45deg, #4facfe, #00f2fe);
box-shadow: 0 0 20px rgba(79, 172, 254, 0.5);
z-index: 997;
}
.rainbow-element {
position: fixed;
pointer-events: none;
border-radius: 50%;
background: conic-gradient(from 0deg, #ff6b6b, #ffa726, #ffe66d, #4ecdc4, #45b7d1, #96ceb4, #ff6b6b);
z-index: 996;
}
@keyframes particleFloat {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(0) translate(var(--tx), var(--ty));
opacity: 0;
}
}
@keyframes rainbowRotate {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
/* 自定义滚动条 */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
}
::-webkit-scrollbar-thumb {
background: linear-gradient(45deg, #667eea, #764ba2);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(45deg, #764ba2, #667eea);
}
/* 响应式设计 */
@media (max-width: 768px) {
.container {
padding: 0 1rem;
}
.grid {
grid-template-columns: 1fr;
}
}
/* 加载动画 */
.loading-spinner {
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top: 2px solid #fff;
width: 20px;
height: 20px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<code_end>
<code_start>
project_name=鼠标跟随效果
filename=script.js
title=鼠标跟随效果交互逻辑
entrypoint=false
runnable=false
project_final_file=true
>
class MouseFollower {
constructor() {
this.followers = [];
this.trailElements = [];
this.particles = [];
this.currentMode = 'trail';
this.elementCount = 5;
this.animationSpeed = 5;
this.elementSize = 15;
this.opacity = 80;
this.colorTheme = 'blue';
this.isRunning = false;
this.init();
}
init() {
this.bindEvents();
this.loadSettings();
this.createFollowers();
this.updateStatus();
}
bindEvents() {
// 鼠标移动事件
document.addEventListener('mousemove', (e) => {
this.handleMouseMove(e);
});
// 控制面板事件
document.getElementById('followMode').addEventListener('change', (e) => {
this.currentMode = e.target.value;
this.updateFollowers();
this.updateStatus();
});
document.getElementById('elementCount').addEventListener('input', (e) => {
this.elementCount = parseInt(e.target.value);
document.getElementById('countDisplay').textContent = this.elementCount;
this.updateFollowers();
this.updateStatus();
});
document.getElementById('animationSpeed').addEventListener('input', (e) => {
this.animationSpeed = parseInt(e.target.value);
const speedText = ['很慢', '较慢', '慢', '较慢', '中等', '较快', '快', '很快', '极快', '最快'][this.animationSpeed - 1];
document.getElementById('speedDisplay').textContent = speedText;
this.updateAnimationSpeed();
});
// 设置模态框事件
document.getElementById('settingsBtn').addEventListener('click', () => {
this.showSettings();
});
document.getElementById('closeSettings').addEventListener('click', () => {
this.hideSettings();
});
document.getElementById('saveSettings').addEventListener('click', () => {
this.saveSettings();
this.hideSettings();
});
document.getElementById('resetSettings').addEventListener('click', () => {
this.resetSettings();
});
// 点击模态框外部关闭
document.getElementById('settingsModal').addEventListener('click', (e) => {
if (e.target.id === 'settingsModal') {
this.hideSettings();
}
});
// 设置面板控件
document.getElementById('elementSize').addEventListener('input', (e) => {
this.elementSize = parseInt(e.target.value);
});
document.getElementById('opacity').addEventListener('input', (e) => {
this.opacity = parseInt(e.target.value);
});
document.getElementById('colorTheme').addEventListener('change', (e) => {
this.colorTheme = e.target.value;
});
}
handleMouseMove(e) {
const mouseX = e.clientX;
const mouseY = e.clientY;
this.updateStatus(mouseX, mouseY);
switch (this.currentMode) {
case 'trail':
this.updateTrailMode(mouseX, mouseY);
break;
case 'particles':
this.updateParticleMode(mouseX, mouseY);
break;
case 'magnetic':
this.updateMagneticMode(mouseX, mouseY);
break;
case 'rainbow':
this.updateRainbowMode(mouseX, mouseY);
break;
}
}
updateTrailMode(x, y) {
this.followers.forEach((follower, index) => {
setTimeout(() => {
const delay = (index + 1) * (20 - this.animationSpeed * 2);
this.moveFollower(follower, x, y, delay);
}, 0);
});
}
updateParticleMode(x, y) {
// 创建新粒子
if (this.particles.length < this.elementCount * 2) {
this.createParticle(x, y);
}
// 更新现有粒子
this.particles.forEach((particle, index) => {
if (particle.style.opacity <= 0) {
particle.remove();
this.particles.splice(index, 1);
}
});
}
updateMagneticMode(x, y) {
this.followers.forEach((follower, index) => {
const baseX = x - this.elementSize / 2;
const baseY = y - this.elementSize / 2;
// 磁性吸附效果 - 元素会稍微偏离鼠标位置
const offsetX = Math.sin(Date.now() * 0.01 + index) * 20;
const offsetY = Math.cos(Date.now() * 0.01 + index) * 20;
follower.style.left = `${baseX + offsetX}px`;
follower.style.top = `${baseY + offsetY}px`;
follower.style.transform = `scale(${1 + Math.sin(Date.now() * 0.005 + index) * 0.2})`;
});
}
updateRainbowMode(x, y) {
this.followers.forEach((follower, index) => {
const delay = index * (100 - this.animationSpeed * 10);
setTimeout(() => {
follower.style.left = `${x - this.elementSize / 2}px`;
follower.style.top = `${y - this.elementSize / 2}px`;
follower.style.animation = `rainbowRotate ${2 + this.animationSpeed * 0.2}s linear infinite`;
follower.style.background = this.getRainbowColor(index);
}, delay);
});
}
createFollowers() {
const demoArea = document.getElementById('demoArea');
// 清理现有的跟随元素
this.followers.forEach(follower => follower.remove());
this.followers = [];
for (let i = 0; i < this.elementCount; i++) {
const follower = document.createElement('div');
follower.className = this.getFollowerClass();
follower.style.width = `${this.elementSize}px`;
follower.style.height = `${this.elementSize}px`;
follower.style.opacity = `${this.opacity / 100}`;
follower.style.background = this.getFollowerColor(i);
demoArea.appendChild(follower);
this.followers.push(follower);
}
}
createParticle(x, y) {
const particle = document.createElement('div');
particle.className = 'particle';
particle.style.width = `${Math.random() * 10 + 5}px`;
particle.style.height = particle.style.width;
particle.style.left = `${x}px`;
particle.style.top = `${y}px`;
particle.style.background = this.getParticleColor();
// 随机运动方向
const angle = Math.random() * Math.PI * 2;
const distance = Math.random() * 50 + 20;
particle.style.setProperty('--tx', `${Math.cos(angle) * distance}px`);
particle.style.setProperty('--ty', `${Math.sin(angle) * distance}px`);
document.getElementById('demoArea').appendChild(particle);
this.particles.push(particle);
// 自动移除粒子
setTimeout(() => {
particle.style.opacity = 0;
setTimeout(() => {
particle.remove();
this.particles = this.particles.filter(p => p !== particle);
}, 1900);
}, 100);
}
getFollowerClass() {
switch (this.currentMode) {
case 'trail': return 'trail-element';
case 'particles': return 'particle';
case 'magnetic': return 'magnetic-element';
case 'rainbow': return 'rainbow-element';
default: return 'trail-element';
}
}
getFollowerColor(index) {
const colors = {
blue: ['#667eea', '#764ba2', '#4facfe', '#00f2fe'],
rainbow: ['#ff6b6b', '#ffa726', '#ffe66d', '#4ecdc4', '#45b7d1', '#96ceb4'],
pastel: ['#ffafcc', '#a2d2ff', '#bde0fe', '#ffc8dd'],
neon: ['#ff006e', '#fb5607', '#ffbe0b', '#3a86ff']
};
const palette = colors[this.colorTheme] || colors.blue;
return palette[index % palette.length];
}
getRainbowColor(index) {
const hue = (index * 360 / this.elementCount) % 360;
return `hsl(${hue}, 70%, 60%)`;
}
getParticleColor() {
const colors = {
blue: ['#667eea', '#764ba2'],
rainbow: ['#ff6b6b', '#ffa726', '#4ecdc4', '#45b7d1'],
pastel: ['#ffafcc', '#a2d2ff'],
neon: ['#ff006e', '#3a86ff']
};
const palette = colors[this.colorTheme] || colors.blue;
return palette[Math.floor(Math.random() * palette.length)];
}
moveFollower(element, targetX, targetY, delay) {
setTimeout(() => {
element.style.left = `${targetX - this.elementSize / 2}px`;
element.style.top = `${targetY - this.elementSize / 2}px`;
}, delay);
}
updateFollowers() {
this.createFollowers();
}
updateAnimationSpeed() {
// 根据速度设置更新动画参数
this.followers.forEach(follower => {
follower.style.transition = `all ${0.3 - this.animationSpeed * 0.02}s ease-out`;
});
}
updateStatus(x = 0, y = 0) {
const statusElement = document.getElementById('statusInfo');
const modeNames = {
trail: '轨迹跟随',
particles: '粒子效果',
magnetic: '磁性吸附',
rainbow: '彩虹轨迹'
};
statusElement.textContent =
`鼠标位置: (${x}, ${y}) | 跟随元素: ${this.elementCount} | 模式: ${modeNames[this.currentMode]}`;
}
showSettings() {
document.getElementById('settingsModal').classList.remove('hidden');
}
hideSettings() {
document.getElementById('settingsModal').classList.add('hidden');
}
saveSettings() {
const settings = {
elementSize: this.elementSize,
opacity: this.opacity,
colorTheme: this.colorTheme
};
localStorage.setItem('mouseFollowerSettings', JSON.stringify(settings));
this.updateFollowers();
}
loadSettings() {
const saved = localStorage.getItem('mouseFollowerSettings');
if (saved) {
const settings = JSON.parse(saved);
this.elementSize = settings.elementSize || 15;
this.opacity = settings.opacity || 80;
this.colorTheme = settings.colorTheme || 'blue';
// 更新设置面板控件
document.getElementById('elementSize').value = this.elementSize;
document.getElementById('opacity').value = this.opacity;
document.getElementById('colorTheme').value = this.colorTheme;
}
}
resetSettings() {
this.elementSize = 15;
this.opacity = 80;
this.colorTheme = 'blue';
document.getElementById('elementSize').value = this.elementSize;
document.getElementById('opacity').value = this.opacity;
document.getElementById('colorTheme').value = this.colorTheme;
}
}
// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', () => {
new MouseFollower();
});
// 性能优化：使用requestAnimationFrame
let lastTime = 0;
function animate(time) {
const deltaTime = time - lastTime;
lastTime = time;
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
<code_end>
扫一扫
619
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
