javascript - 优化 onMouseMove 驱动的动画

标签 javascript

为了给我们的 Web 应用程序添加一些个性,我在某些元素上添加了一些动画,当鼠标靠近时,我们的机器人吉祥物会从后面窥视。为此,我使用 onmousemove 函数来检查光标的距离,并在鼠标靠近时为机器人设置动画。

它工作得很好,但是当用户移动鼠标时,即使它没有动画任何内容,每秒多次运行此函数似乎非常未优化。我的问题是,是否有其他常见的方法来制作这样的动画,并且不需要使用 CPU?

您可以在我们的博客上查看示例和代码 http://www.hiringthing.com/2011/10/31/buttons-with-a-surprise.html

谢谢

最佳答案

当鼠标悬停在页面的主要部分时,您可以附加和删除事件处理程序,以便在使用导航和页面的其他区域时它不会运行。如果页面上有多个元素(如演示中所示),那么您可能无能为力。

关于javascript - 优化 onMouseMove 驱动的动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8001146/

相关文章:

javascript - (使用 Javascript 对象进行实验)为什么我的函数在另一个函数中不起作用?

javascript - 如何让promise.response返回API的响应?

javascript - 使用 Paper.js 进行补间动画

Javascript 输入(Int/String)问题

javascript - graphql 标签中不允许字符串插值。 ( Gatsby )

javascript - 我如何判断一个对象是否是 jQuery Promise/Deferred?

javascript - 获取错误: invalid json response body at reason: Unexpected end of JSON input when using mockfetch with Jest

javascript - 仅循环对象的键的简写?

php - 没有选项,无法选择。如何在 Javascript 中调用数据库中的数据?

php - 带有水印提示和提交值的输入文本框