1

他の 2 つの画像が翼のように見えるように、画像を公開するプロジェクトを完了しようとしていますか? 例はこれでした：

ここに画像の説明を入力

私はDIVといくつかのjQueryでそれをやろうとしましたが、真ん中からではなく、上下または隅からスライドインするなど、間違った方法で明らかにしたり明らかにしたりすることができるのは1つだけです。

これを行う簡単な方法を知っている人はいますか？

jsfiddle.net/fTJPu/17/embedded/結果

4

2 に答える 2

2

JQuery UI の slide() 関数を使用できます。

JQuery UI スライド デモ

css で z-index が低い翼をベース イメージの下に配置し、非表示にします。

スライド機能で翼を切り替えてスライドさせます。API を使用すると、遅延時間で左右にスライドできます。

あなたが持っているもののjsFiddleはいいでしょう。

更新: ここにjsFiddleがあります。私はあなたのようにテーブルを使用しませんでしたが、div を使用しました。少しすっきりしたような気がします。基本的に、翼は非表示から始まり、toggle() で表示されます。UIスライダーを使用しました。

HTML:

<div class="angelBox">
    <div class="angelBody">
        <div class="leftWing wing"></div>
        <div class="rightWing wing"></div>
    </div>
</div>
    <br/><br/>
    Click on the Blue Box

CSS:

.angelBox{
    margin-left:100px;
}
.angelBody{
    position:relative;
    width:150px;
    height:150px;
    background-color:blue;

 }

.wing{
    width:70px;
    height:50px;
    background-color:grey;
    display:none;
}
.leftWing{
    position:absolute;
    left:-70px;
    top:50px;
}
.rightWing{
   position:absolute;
    right:-70px;
    top:50px;
}

Javascript:

$('.angelBody').click(function(){
    $('.leftWing').toggle("slide", { direction: "right" }, 500);
    $('.rightWing').toggle("slide", { direction: "left" }, 500);
});

要素は絶対的な位置にありますが、相対的に配置されたコンテナーにあるため、「ウィジェット」全体を好きな場所に移動できます。

于 2013-03-08T00:16:06.173 に答える
0

他のすべてが失敗した場合は、通常、.animate() を使用して必要な動作を強制できます。

おそらく、各ウィングに 1 つずつ、2 つの異なるアニメーション コールをセットアップするでしょう。各翼の初期幅をベース イメージの幅より小さく設定し、ベース イメージの z-index を翼より高く設定してから、次のようにします。

$('#image2').animate({
    'width': image2Width,
    'left': (leftEdgeOfBaseImage - image2Width)
}, delay);

$('#image3').animate({
    'width': image3Width,
    'left': rightEdgeOfBaseImage
}, delay);
于 2013-03-08T00:36:36.960 に答える