虽然因为期末周去不了蔚蓝档案四周年活动（我讨厌期末周QAQ） 但这并不影响我扒一下活动页面搞点好图。
除了一张壁纸、一首歌之外，活动宣传页的鼠标指针也很有意思，于是扒下来仿了一下
主要实现逻辑：在网页Header引入元素，添加css样式，页尾使用js实现缓动和位置追踪
Header部分：
<div class="cursorPointer">
<div id="Q_ban" class="follow-element">
<img src="https://webusstatic.yo-star.com/bluearchive-jp/4th-anniversary/main/web/assets/Q-862c2944.png" alt="Q_ban">
</div>
<div id="fish" class="follow-element">
<img src="https://webusstatic.yo-star.com/bluearchive-jp/4th-anniversary/main/web/assets/fish-9fba776c.png" alt="fish">
</div>
</div>CSS样式部分：
/* 阿罗娜指针跟随 */
.cursorPointer {
position: fixed; /* 固定定位，否则滚轮会让指针和鼠标分离 */
width: 100%;
height: 100%;
z-index: 9999;/* 让阿罗娜居于最顶层 */
pointer-events: none; /* 确保鼠标事件不被阻挡 */
}
.follow-element {
position: fixed; /* 固定定位 */
pointer-events: none; /* 确保元素不会阻挡鼠标事件 */
transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1); /* 使用更自然的缓动曲线 */
}
/* 移动端隐藏指针跟随效果，不隐藏的话会怪怪的，点一下屏幕阿罗娜飞来飞去 */
@media (max-width: 768px) {
.cursorPointer {
display: none; /* 移动端不显示 */
}
.follow-element {
display: none; /* 移动端不显示 */
}
}
.follow-element img {
width: 72px; /* 根据需求调整图像大小 */
height: auto;
}
#fish img {
width: 50px; /* 根据需求调整 fish 的大小 */
height: auto; /* 保持原比例 */
}JS页尾代码部分：
</script>
// 设置阿罗娜跟踪
document.addEventListener('DOMContentLoaded', function() {
const Q_ban = document.getElementById('Q_ban');
const fish = document.getElementById('fish');
// 设置缓动效果的参数
let Q_banPos = { x: 0, y: 0 };
let fishPos = { x: 0, y: 0 };
const Q_banEasing = 0.1; // Q_ban 的缓动速度
const fishEasing = 0.05; // fish 的缓动速度，值更小表示移动更慢
// 设置 fish 的偏移量
const fishOffset = { x: 50, y: 50 }; // fish元素向右下方偏移的值
let targetX = window.innerWidth / 2; // 初始化鼠标目标位置X
let targetY = window.innerHeight / 2; // 初始化鼠标目标位置Y
function updatePositions() {
// 计算 Q_ban 的缓动效果
Q_banPos.x += (targetX - Q_banPos.x) * Q_banEasing;
Q_banPos.y += (targetY - Q_banPos.y) * Q_banEasing;
Q_ban.style.transform = `translate(${Q_banPos.x}px, ${Q_banPos.y}px)`;
// 计算 fish 的缓动效果并添加偏移
fishPos.x += (targetX - fishPos.x) * fishEasing;
fishPos.y += (targetY - fishPos.y) * fishEasing;
fish.style.transform = `translate(${fishPos.x + fishOffset.x}px, ${fishPos.y + fishOffset.y}px)`;
requestAnimationFrame(updatePositions); // 继续更新位置
}
document.addEventListener('mousemove', function(event) {
targetX = event.clientX; // 更新目标位置X
targetY = event.clientY; // 更新目标位置Y
});
// 开始动画循环
updatePositions(); // 启动位置更新
});
</script>WordPress Sakurairo主题添加方法：
我们蔚蓝档案玩家真的是太有实力辣✌😤😤😤
附上油猴脚本，可以让所有网页都有阿罗娜陪你
// ==UserScript==
// @name Cursor Pointer Follow
// @namespace http://tampermonkey.net/
// @version 1.0
// @description 实现指针跟随效果
// @author 上条当咩
// @match *://*/*
// @grant GM_addStyle
// ==/UserScript==
(function() {
'use strict';
// 插入样式
GM_addStyle(`
.cursorPointer {
position: fixed;
width: 100%;
height: 100%;
z-index: 9999;
pointer-events: none;
}
.follow-element {
position: fixed;
pointer-events: none;
transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
}
@media (max-width: 768px) {
.cursorPointer, .follow-element {
display: none;
}
}
.follow-element img {
width: 72px;
height: auto;
}
#fish img {
width: 50px;
height: auto;
}
`);
// 创建并插入HTML元素
const cursorHTML = `
<div class="cursorPointer">
<div id="Q_ban" class="follow-element">
<img src="https://webusstatic.yo-star.com/bluearchive-jp/4th-anniversary/main/web/assets/Q-862c2944.png" alt="Q_ban">
</div>
<div id="fish" class="follow-element">
<img src="https://webusstatic.yo-star.com/bluearchive-jp/4th-anniversary/main/web/assets/fish-9fba776c.png" alt="fish">
</div>
</div>`;
document.body.insertAdjacentHTML('afterbegin', cursorHTML);
// 创建指针跟随逻辑
const scriptContent = `
(function() {
let Q_ban = document.getElementById('Q_ban');
let fish = document.getElementById('fish');
let Q_banPos = { x: 0, y: 0 };
let fishPos = { x: 0, y: 0 };
const Q_banEasing = 0.1;
const fishEasing = 0.05;
const fishOffset = { x: 50, y: 50 };
let targetX = window.innerWidth / 2;
let targetY = window.innerHeight / 2;
function updatePositions() {
Q_banPos.x += (targetX - Q_banPos.x) * Q_banEasing;
Q_banPos.y += (targetY - Q_banPos.y) * Q_banEasing;
Q_ban.style.transform = \`translate(\${Q_banPos.x}px, \${Q_banPos.y}px)\`;
fishPos.x += (targetX - fishPos.x) * fishEasing;
fishPos.y += (targetY - fishPos.y) * fishEasing;
fish.style.transform = \`translate(\${fishPos.x + fishOffset.x}px, \${fishPos.y + fishOffset.y}px)\`;
requestAnimationFrame(updatePositions);
}
document.addEventListener('mousemove', function(event) {
targetX = event.clientX;
targetY = event.clientY;
});
updatePositions();
})();
`;
// 创建一个新的<script>标签并注入到网页中
const scriptTag = document.createElement('script');
scriptTag.textContent = scriptContent;
document.body.appendChild(scriptTag);
})();
Comments NOTHING