0

初めまして、長文失礼致しました。CSS、HTML、JavaScript を使用しようとしているので、std の使用はお勧めしません。ライブラリ。

1) ナビゲーションバーで「フェードイン/フェードアウト効果」を実現するために、CSS、HTML、JavaScript でさまざまなアプローチを使用している人を見つけました。CSS と JavaScript を使用したアプローチのいくつかは次のとおりです。

a) プロパティ「left」を使用して、サブメニューを画面外に取得します。デフォルトの左:-500px;onmouseover-左:-10px

b) プロパティ「可視性」を使用します。デフォルトの可視性: "hidden" および onmouseover- 可視性: visbile

c) プロパティ「display」を使用します。デフォルトの display:none および onmouseover-display:block

私の質問は、どれが最良のアプローチであり、その理由は何ですか?

2)私はこのjsfiddleでメソッドa)を使用しました: http://jsfiddle.net/A7TND/。

CSS

.teal-box{
left:-10px;
}

HTML

<div class="level1" onmouseover="showSubs(&quot;+&quot;)">

Javascript

switch (vwFlg){    
case "+" :
elmt.style.left = "-10px";
...
}

この例では、メインアイテム（お気に入り）とサブアイテム（jsfiddle、google）の間を移動しているときに関数が何度も呼び出されるかどうかわかりません。私の質問は次のとおりです。メインアイテム(お気に入り)とサブアイテム(googleとjsfiddle)の間のマウスの動き? b）それ（JavaScript関数を何度も呼び出すこと）は、ページの応答性にどのように影響しますか？

3.複数の画像（jsfiddleリンクを参照）を次のように区切るために私が行ったアプローチ

、複数の div があります - top の値が異なる場合、それが最善のアプローチですか? これは、画像ごとにdivを作成する必要があることを意味します。画像と同じ数のdivを作成せずに、絶対および相対の「位置」プロパティを使用してそれを実現する気の利いた方法はありますか?

  1. テーブルを作成したいのですが行セレクターのあるテーブル、「ボタンがページから飛び出す」ようにするにはどうすればよいですか? 商用 Web アプリをデバッグしようとしましたが、背景画像を繰り返しているように見えますが、試してみましたが、うまくいきませんでした。

CSS

.sel-row {
border-style:solid;
border-width:1px;
background-image:url("\lb_sel.gif");
background-repeat:repeat-x-y;
background-color:#CDD2D7 ;
border-color:#8B96A2 ;
height:20px;
}
4

1 に答える 1

0

このようなものに対する私のアプローチは、非表示の要素をホバー要素の子にし、非表示/表示に絶対位置と表示を使用することです。

<li>
  Button Copy
  <span>HIDE SHOW ME</span>
</li>

li {
  position:relative;
}
li:hover span {
  display:block;
}
li span {
  position:absolute;
  top:25px;
  left:0;
  display:none;
}

不透明度もアニメートしていますか？

javascriptを使用してクラスを要素に追加し、CSS3を使用してアニメーション化しますが、CSS3を使用しないブラウザーを理解します。また、ディスプレイはもう使用しないでください。

<li>
      Button Copy
      <span>HIDE SHOW ME</span>
    </li>

    li {
      position:relative;
    }
    li.show span {
      opacity:0;
    }
    li span {
      position:absolute;
      top:25px;
      left:0;
      opacity:1;
      -webkit-transition: all .8s ease-in;
      -moz-transition: all .8s ease-in;
      -o-transition: all .8s ease-in;
      -ms-transition: all .8s ease-in;
      transition: all .8s ease-in;
    }

css3をサポートしていないブラウザーでは、フォールバックにModernizr+jQueryを使用します。これをトグルに変える必要があります。

if (!Modernizr.csstransitions) { // if browser doesn't support css3.transitions
  $('li span').animate({ "opacity": '1' }, 800);
} else { // if browser does support css3.transitions
  $('li').addClass('show');
}
于 2013-03-20T17:39:43.327 に答える