使用jQuery/HTML5聚焦灯光效果

Question

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

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

谢谢。

Answer 1

假设你想要这个效果发生悬停，我们将使用一类“聚光灯”

您的页面将需要2个的div，使这项工作，将只有真正用CSS3/jQuery的工作

第一格将创造光的效果。使用3部分css水平渐变创建。每种颜色都应该是RGB，所以你可以包含透明度。这个div将会很高而且很窄，并且会隐藏在页面上

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

当检测到悬停事件的几件事情需要发生：

首先你需要获得该元素的位置，然后让浏览器的顶部中央位置。你将使用这2点来计算倾斜“光”格所需的角度。然后将光线潜水定位在浏览器的顶部中心并设定倾斜角度并取消隐藏。此时，您将使用混合了jquery动画的css变换，使盒子的底部更宽，以增加聚光灯的外观。

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

然后在悬停出来做相反的顺序，并再次隐藏元素。