本文将介绍如何使用 JavaScript 和 CSS 创建一个元素，使其跟随鼠标移动，并始终指向屏幕中心。通过监听 mousemove 事件，计算元素与屏幕中心之间的角度，并使用 CSS transform 属性动态调整元素的位置和旋转角度，实现鼠标跟随和指向中心的效果。
实现原理
实现该效果的核心在于以下几点：
- 监听鼠标移动事件： 使用 document.addEventListener('mousemove', callback) 监听鼠标在文档中的移动。
- 计算角度： 在 mousemove 事件的回调函数中，获取鼠标的坐标 (x, y)，并计算屏幕中心坐标。然后，使用 Math.atan2(deltaY, deltaX) 计算元素与屏幕中心之间的角度。
- 调整位置和旋转： 使用 CSS transform 属性的 translate() 和 rotate() 函数，动态调整元素的位置和旋转角度。translate() 用于使元素跟随鼠标移动，rotate() 用于使元素指向屏幕中心。
代码实现
以下是实现该效果的完整代码：
HTML:
<div id="myDiv"></div>
CSS:
#myDiv {
cursor:none; /* 隐藏鼠标 */
overflow:hidden; /* 隐藏滚动条 */
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: lightgray;
transform-origin: center center;
transform: rotate(-100deg); /* 初始旋转角度 */
background: url(https://upload.wikimedia.org/wikipedia/commons/8/89/Flashlight.svg) no-repeat center / contain; /* 使用图片作为背景 */
}
body{
overflow:hidden; /* 隐藏滚动条 */
}JavaScript:
const centerX = window.innerWidth / 2;
const centerY = window.innerHeight / 2;
const myDiv = document.getElementById('myDiv');
document.addEventListener('mousemove', (event) => {
const x = event.clientX;
const y = event.clientY;
const deltaX = (centerX - event.clientX);
const deltaY = (centerY - event.clientY);
let angle = Math.atan(deltaY/deltaX) * 180 / Math.PI;
// 根据象限调整角度
if((x>centerX && y<centerY) || (y>centerY && x>centerX))angle+=180
const distance = 50; // 调整跟随鼠标的距离
const translateX = event.clientX - distance;
const translateY = event.clientY - distance;
const extraRotationForSVG = 210; // 调整 SVG 图片的初始方向
myDiv.style.transform = `translate(${translateX}px, ${translateY}px) rotate(${angle+extraRotationForSVG}deg)`;
});代码解释:
- centerX 和 centerY: 获取屏幕中心坐标。
- deltaX 和 deltaY: 计算屏幕中心与鼠标位置的距离差。
- angle: 使用 Math.atan(deltaY/deltaX) 计算角度，并将弧度转换为角度。需要根据鼠标所在的象限调整角度，以确保指向屏幕中心。
- distance: 调整元素跟随鼠标的距离。
- translateX 和 translateY: 计算元素的位置，使其跟随鼠标移动。
- extraRotationForSVG: 调整 SVG 图片的初始方向，使其正确指向屏幕中心。 这是因为SVG本身的方向可能不是正上方。
- myDiv.style.transform: 使用 CSS transform 属性更新元素的位置和旋转角度。
注意事项
- 性能优化： 频繁的 DOM 操作可能会影响性能。如果性能成为问题，可以考虑使用 requestAnimationFrame 来优化动画。
- 初始旋转角度： 根据使用的图片或元素的初始方向，可能需要调整 extraRotationForSVG 的值。
- 兼容性： 该代码在现代浏览器中运行良好。如果需要支持旧版本的浏览器，可能需要添加兼容性代码。
- 隐藏滚动条和鼠标： CSS 中 overflow:hidden; 用于隐藏滚动条， cursor:none; 用于隐藏鼠标，可以根据实际情况选择是否使用。
总结
通过本文，你学习了如何使用 JavaScript 和 CSS 创建一个跟随鼠标移动并指向屏幕中心的元素动画。 该技术可以应用于各种交互式 Web 应用，例如游戏、可视化工具等。 掌握这种技巧，可以为你的 Web 应用增加更丰富的交互体验。 调整 distance 和 extraRotationForSVG 可以定制动画效果，使其更符合你的需求。
