使用 jQuery / HTML5 聚焦灯光效果

Question

我需要复制在闪光灯中完成的聚焦光效果。 Here is the link.
当您悬停菜单项时，将出现焦点灯光效果。

如何在不使用闪光灯的情况下完成此操作。有可用的插件吗？ jquery 或 HTML5 中的任何提示或示例都会有所帮助。

谢谢。

Answer 1

假设您希望这种效果发生在悬停时，我们将使用一个类 'spotlight'

您的页面需要 2 个 div 才能完成这项工作，并且仅适用于 css3/jquery

第一个 div 将创建光的效果。使用 3 部分 CSS 水平渐变创建它。每种颜色都应该是 RGB，因此您可以包含透明度。这个 div 一开始就会又高又窄，并且会隐藏在页面上

第二个 div 将用于创建元素被点亮的效果。这将是一个短而宽的 div，其边框半径使其成为椭圆形，然后是一个盒子阴影，使其发光。

当检测到悬停事件时，需要发生一些事情：

首先您需要获取元素的位置，然后获取浏览器顶部中心的位置。您将使用这 2 个点来计算倾斜“光”div 所需的角度。然后使用倾斜设置将灯光潜水定位在浏览器的顶部中心并取消隐藏。此时，您将使用 css transform 与 jquery animate 混合使用来使框的底部更宽，以提供加宽聚光灯的外观。

与此同时，您需要将“发光”框放置在元素后面，然后随着聚光灯变宽设置动画效果。

然后在悬停时以相反的顺序执行并再次隐藏元素。