本文将介绍如何使用 JavaScript 和 CSS 创建一个元素，使其跟随鼠标移动，并始终指向屏幕中心。通过监听 mousemove 事件，计算元素与屏幕中心之间的角度，并使用 CSS transform 属性动态调整元素的位置和旋转角度，实现鼠标跟随和指向中心的效果。
实现原理
实现该效果的核心在于以下几点：
监听鼠标移动事件： 使用 document.addEventListener(‘mousemove’, callback) 监听鼠标在文档中的移动。计算角度： 在 mousemove 事件的回调函数中，获取鼠标的坐标 (x, y)，并计算屏幕中心坐标。然后，使用 Math.atan2(deltaY, deltaX) 计算元素与屏幕中心之间的角度。调整位置和旋转： 使用 CSS transform 属性的 translate() 和 rotate() 函数，动态调整元素的位置和旋转角度。translate() 用于使元素跟随鼠标移动，rotate() 用于使元素指向屏幕中心。
代码实现
以下是实现该效果的完整代码：
HTML:
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 && ycenterY && 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 可以定制动画效果，使其更符合你的需求。
以上就是创建鼠标跟随及指向屏幕中心的元素动画的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1517631.html
微信扫一扫 
支付宝扫一扫 
