1

CSS3またはJSを使用した「後で読む」アプリのように、左にスライドする方法を知っている人はいますか?

onclick --> div 全体を左にスライドさせ、スライドした div の下に div を表示します。

ここに例のビデオがあります:後でそれを読んでください

4

2 に答える 2

4

それはcss3であなたが望むかもしれません。 CSS

.parent{
    width:300px;
    border:1px solid red;
    height:100px;
    position:relative;
}
.box{
    width:40px;
    height:40px;
    background:green;
    display:block;
    z-index:0;
}
.slider{
    width:300px;
    background:#454545;
    color:#fff;
    font-weight:bold;
    font-size:24px;
    height:100px;
    position:absolute;
    top:0;
    right:300px;
    transition: right 1s ease;
    -moz-transition: right 1s ease; /* Firefox 4 */
    -webkit-transition:right 1s ease; /* Safari and Chrome */
    -o-transition:right 1s ease; /* Opera */
    z-index:1;
}
.box:focus + .slider,.box:active + .slider{
    right:0;
}

HTML

<div class="parent">
    <a href="#" class="box"></a>
    <div class="slider">hello</div>
</div>

これをチェックしてくださいhttp://jsfiddle.net/MhHx2/

更新しました

http://jsfiddle.net/MhHx2/4/

于 2012-06-22T11:04:07.470 に答える
0

その効果は、いくつかの標準的な手法を使用して実現できます。

  1. 2つの要素を作成します。1divつはスライドアウトする要素用で、もう1つは公開する要素用です。
  2. z-indexを使用してそれらを配置します。これを機能させるには、、、divを使用してsを配置する必要があることに注意してください。absoluterelativefixed
  3. 効果にはjQueryを使用できます。ここでまともな投稿を見つけました。

それはあなたを成し遂げるはずです。

于 2012-06-22T10:41:09.783 に答える