86 lines
3.0 KiB
JavaScript
86 lines
3.0 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function() {
|
|
// 创建自定义光标元素
|
|
const customCursor = document.createElement('div');
|
|
customCursor.className = 'custom-cursor';
|
|
customCursor.textContent = '尚美娱乐';
|
|
document.body.appendChild(customCursor);
|
|
|
|
// 创建左上角固定文字元素
|
|
const cornerText = document.createElement('div');
|
|
cornerText.className = 'corner-text';
|
|
cornerText.textContent = '尚美娱乐';
|
|
document.body.appendChild(cornerText);
|
|
|
|
// 获取所有卡片元素
|
|
const cards = document.querySelectorAll('.card');
|
|
|
|
// 鼠标移动时的位置变量
|
|
let mouseX = 0;
|
|
let mouseY = 0;
|
|
let cursorX = 0;
|
|
let cursorY = 0;
|
|
|
|
// 平滑跟随效果
|
|
function animate() {
|
|
// 平滑跟随效果，使光标移动更自然
|
|
const distX = mouseX - cursorX;
|
|
const distY = mouseY - cursorY;
|
|
|
|
cursorX += distX * 0.2;
|
|
cursorY += distY * 0.2;
|
|
|
|
customCursor.style.left = cursorX + 'px';
|
|
customCursor.style.top = cursorY + 'px';
|
|
|
|
requestAnimationFrame(animate);
|
|
}
|
|
|
|
// 启动动画
|
|
animate();
|
|
|
|
// 鼠标移动时更新位置变量
|
|
document.addEventListener('mousemove', function(e) {
|
|
mouseX = e.clientX + 15;
|
|
mouseY = e.clientY + 15;
|
|
|
|
// 添加轻微的缩放效果
|
|
const scale = 1 + Math.sin(Date.now() * 0.003) * 0.1;
|
|
customCursor.style.transform = `scale(${scale})`;
|
|
});
|
|
|
|
// 为所有可交互元素添加鼠标进入事件
|
|
const interactiveElements = document.querySelectorAll('.card, .btn, input, label, a, select, textarea');
|
|
|
|
interactiveElements.forEach(element => {
|
|
element.addEventListener('mouseenter', function() {
|
|
// 鼠标进入可交互元素时，将自定义光标透明度设为很低（不是完全隐藏），显示左上角文字
|
|
customCursor.style.opacity = '0.01'; // 几乎不可见但仍然存在
|
|
cornerText.classList.add('visible');
|
|
});
|
|
|
|
element.addEventListener('mouseleave', function() {
|
|
// 鼠标离开可交互元素时，显示自定义光标，隐藏左上角文字
|
|
customCursor.style.opacity = '1';
|
|
cornerText.classList.remove('visible');
|
|
});
|
|
});
|
|
|
|
// 鼠标点击效果
|
|
document.addEventListener('click', function() {
|
|
// 点击时添加缩放动画
|
|
customCursor.style.transform = 'scale(0.8)';
|
|
setTimeout(() => {
|
|
const scale = 1 + Math.sin(Date.now() * 0.003) * 0.1;
|
|
customCursor.style.transform = `scale(${scale})`;
|
|
}, 100);
|
|
});
|
|
|
|
// 初始状态：显示自定义光标，隐藏左上角文字
|
|
customCursor.style.opacity = '1';
|
|
cornerText.classList.remove('visible');
|
|
|
|
// 防止在页面加载时出现闪烁
|
|
setTimeout(() => {
|
|
customCursor.style.transition = 'opacity 0.3s ease, transform 0.1s ease';
|
|
}, 100);
|
|
});
|