使用jQuery / HTML5聚焦光效

Question

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

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

感谢。

Answer 1

假设您希望在悬停时发生此效果，我们将使用“聚光灯”类

您的页面需要2个div来完成这项工作，并且只能与css3 / jquery一起使用

第一个div会产生光效。使用3部分css水平渐变创建它。每种颜色都应该是RGB，因此您可以包含透明度。这个div将高而窄，可以隐藏在页面上

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

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

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

同时发生这种情况时，您需要将“发光”框放置在元素后面，然后随着聚光灯变宽而使其变大。

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