使用jQuery/HTML5聚焦燈光效果

Question

我需要複製在閃光燈中完成的焦點燈光效果。 Here is the link。
當您懸停菜單項目時，會出現焦點燈光效果。

如何在不使用閃光燈的情況下完成此操作。任何插件可用？ jQuery或HTML5中的任何提示或示例都會有所幫助。

謝謝。

Answer 1

假設你想要這個效果發生懸停，我們將使用一類「聚光燈」

您的頁面將需要2個的div，使這項工作，將只有真正用CSS3/jQuery的工作

第一格將創造光的效果。使用3部分css水平漸變創建。每種顏色都應該是RGB，所以你可以包含透明度。這個div將會很高而且很窄，並且會隱藏在頁面上

第二個div將被用來創建元素變亮的效果。這將是一個短而寬的div，邊框半徑使它成爲一個橢圓形，然後是一個盒子的陰影，使它煥發光彩。

當檢測到懸停事件的幾件事情需要發生：

首先你需要獲得該元素的位置，然後讓瀏覽器的頂部中央位置。你將使用這2點來計算傾斜「光」格所需的角度。然後將光線潛水定位在瀏覽器的頂部中心並設定傾斜角度並取消隱藏。此時，您將使用混合了jquery動畫的css變換，使盒子的底部更寬，以增加聚光燈的外觀。

同時發生這種情況，您需要將「發光」框放置在元素後面，然後在聚光燈變大時使其變得更大。

然後在懸停出來做相反的順序，並再次隱藏元素。