-1

ページの左側にあるスライド アウト div をサイトに実装しました。小さなハンドルをクリックすると、タブを前後に引っ張ることができます。

実例はこちら

現在、CSS は次のように 500px 幅に設定されています。代わりに 250px の幅が必要です。

.panel {
  width:500px;
  min-height:175px;
  padding:40px;
  position:fixed;
  left:-580px;
  top:29.5%;
  z-index:1;
  background:#4d5290;
  -webkit-border-radius: 0px 0px 25px 0px;
border-radius: 0px 0px 25px 0px;
}

  .panel .trigger {
    width:36px;
    text-align:center;
    color:#fff;
    position:absolute;
    top:0;
    right:-36px;
  }

幅を幅に半分にしてから、値を半分にして、必要な結果を得る250pxことができると想定しました。left:-580px

ただし、スライドアウトタブは外側にうまくスライドしますが、ハンドルをもう一度クリックしてタブを非表示にすると、元の 580 ピクセルがページから飛び出します (つまり、表示したり元に戻したりすることはできません)。

私はそれを JS Fiddle で動作させようとしましたが、JS ファイルが js fiddle で適切に動作しないため苦労しています...それに取り組んでいます。それまでの間、必要なものはすべて次の場所で確認できます。

ページ/ライブ サイト JS リンク ファイル

誰かがそれが何をしているのかを理解するのを手伝ってくれることを願っています。または、数値の差の式は何ですか?

4

1 に答える 1

2 
.panel {
    width: 250px;
    min-height: 175px;
    padding: 40px;
    position: fixed;
    left: -330px; //you have 40px of padding, we need to add that to this calculation.
    top: 29.5%;
    z-index: 1;
    background: #4D5290;
    border-radius: 0px 0px 0px 25px;
}

jQueryの変更...

$(settings.objSlidePanel).animate({
    'left' : '-330px'
});

あなたのコードは実際に動いています -- ここをクリック

編集

また、マークアップに問題がある可能性も十分にあります。サイトからコピーしたときに、img タグが のようにレンダリングされ<img src="blahblahblah.ext" <=" div=""/>ました。これは、おそらくこのコードではなく、他の場所で問題を引き起こしている可能性があります。

また、その自己にハードコーディングstyle="left:-580px"していないことも確認してください。<div>

于 2012-10-20T00:07:08.533 に答える