フラッシュで行われたフォーカス ライト効果を再現する必要があります。ここにリンクがあります。
メニュー項目にカーソルを合わせると、フォーカス ライト効果が表示されます。
フラッシュを使わずにこれを行う方法。利用可能なプラグインはありますか? jquery または HTML5 のヒントやサンプルは役に立ちます。
ありがとう。
1081 次
1 に答える
0
この効果をホバー時に発生させたいと仮定すると、クラス「スポットライト」を使用します
これを機能させるにはページに 2 つの div が必要であり、実際には css3/jquery でのみ機能します
最初の div は、光の効果を作成します。3 つの部分の css 水平グラデーションを使用して作成します。透明度を含めることができるように、各色は RGB にする必要があります。この div は最初は背が高くて狭く、ページ上で非表示になります
2 番目の div は、要素がライトアップされる効果を作成するために使用されます。これは、境界線の半径が楕円形になる短く幅の広い div になり、次にボックスの影が輝きを与えます。
ホバー イベントが検出されると、いくつかの処理が必要になります。
まず、要素の位置を取得してから、ブラウザの上部中央の位置を取得する必要があります。これらの 2 点を使用して、「明るい」div を歪めるために必要な角度を計算します。次に、スキューを設定してブラウザの上部中央にライト ダイブを配置し、再表示します。この時点で、css 変換を jquery animate と組み合わせて使用して、ボックスの底を広くし、スポット ライトを広げたように見せます。
同時に、要素の後ろに「グロー」ボックスを配置し、スポット ライトが広がるにつれて大きくなるようにアニメートします。
次に、ホバーアウトして逆の順序で実行し、要素を再度非表示にします。
于 2013-09-27T06:56:59.590 に答える