1

私は以下を構築しようとしています、

ページに依存するアニメーション バックグループ

基本的に、白いテキストの下にある濃い緑色のバーは、アクティブなリンクに応じて拡大および縮小する必要があります。たとえば、現時点では、THE JOBWALL リンクがアクティブであるため、緑色のバーはそのリンクの幅に広がります。この効果を実現するにはどうすればよいですか。緑色のバーを作成する背景画像をアニメーション化して、ページが読み込まれたときにバーがアクティブなページの下に収まるまで左右からアニメーション化することは可能ですか?

どんな助けでも素晴らしいでしょう。

4

3 に答える 3

2

これはjQueryで行うことができます。方法は次のとおりです。

まず、緑色のバーとなる各メニュー項目の要素を作成します。CSSを使用して正しく配置する必要があります。この要素の背景色を濃い緑色に設定し、幅をゼロに設定します（デフォルトでは表示されないようにします）。

次に、メニュー項目のonmouseoverイベントへのコールバックを提供します。

 <div class="menu-item" onmouseover="menuRollover(this)" >...</div>

コールバックで

function menuRollover(el){
    $(el).find(".green-bar").animate({'width':60}, 200)

これにより、200ミリ秒の間にバーの幅が60ピクセルにアニメーション化されます。

于 2011-05-13T15:36:01.277 に答える
2

これはあなたのために働くかもしれない一般的なアイデアです：

  1. ID が whitebar の div を作成します。正しい高さと幅になるようにスタイルを設定し、背景色を設定します。

  2. id が緑のバーのホワイトバーに別の div を埋め込みます。ページのタイトルと同じ幅にします。背景色を緑に設定します。

  3. 標準のjqueryアニメーション技術を使用して緑色のバーをアニメーション化します

タイトルの幅が等しくない場合、アニメーションの開始時または終了時にグリーンバーのサイズを変更する必要がある場合があります。

編集：ここにラフスケッチがあります

于 2011-05-13T15:33:05.560 に答える
0

私はこれまでこれをやったことがなく、しばらく前に質問に出くわし、興味を持ち、jsfiddleで自分で試してみました。これが私がhttp://jsfiddle.net/robx/dXZxN/4/で思いついたもので、アニメーション化するためにいくつかの異なる色を使用していますが、ニーズに合わせて簡単に調整できます。

于 2011-05-13T17:10:30.233 に答える