0

画像をクリックするとテキストの説明が表示され（スライドアップ）、すでに表示されているときにクリックすると再び非表示（スライドダウン）になります。

ジャバスクリプト

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<script type="text/javascript">
      $(document).ready(function () {
        $("#image img").click(function () {
            $("#image span").slideToggle();
        });
    });
</script>

CSS

#images {
    width: 275px;
    height: 200px;
}

#image div {
    display: block;
    width: 275px;
    height: 200px;
}

 #image img {
    display: block;
    width: 275px;
    height: 200px;
}

#image span {
    background: #000;
    color: #ccc;
    display: block;
    width: 265px;
    height: 40px;
    padding: 5px;
    display: none;
}

HTML

<div id="images">
    <div id="image">
        <div>                
            <img src="images/test-image.png" width="224px" height="224px" />
            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>

        </div>
    </div>
</div>

これらは、私が作成しようとしているコードの上記の HTML です。この効果の例は、サイト etchapps.com の画像のいずれかをクリックすると実証できます。JavaScript または jQuery でこれを行う方法についてのアイデア. または、これを完了するために使用できる他のプラグインはありますか?

4

3 に答える 3

2

この効果の本当の秘訣は、含まれるラッパーの位置を相対的にすることです。次に、その位置の内側のラッパーを、上/右/下を 0 に設定して絶対にします。表示されている場合のキャプション。

あとは、caption 要素の表示を slideToggle するだけです。私の仕事では、クラスをトグルし、CSS トランジションを使用してディスプレイをカバーしましたが、メソッドを微調整して、コードにインライン化しました。

ここにコードペンの例があります

HTML

<div id="images">
    <div id="image">
        <div>                
            <img src="http://placekitten.com/275/200" />
            <div id="caption">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>
    </div>
</div>

CSS

#images {
    width: 275px;
    height: 200px;
}

#image {
  position: relative;
  width: 275px;
  height: 200px;
  overflow: hidden;
}

#image > div {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;


}

 #image img {
    display: block;
    width: 275px;
    height: 200px;
}

#caption {
    background: #000;
    color: #ccc;
    display: none;
    overflow: hidden;
}

#caption p {
  padding: 5px;
  margin: 0;
}

JS

$(document).ready(function () {
    $("#image img").click(function () {
        $("#caption").slideToggle();
    });
});

また、よりセマンティックなマークアップのために div から figcaption および caption 要素に切り替え、おそらくクラスの ID を切り替えることをお勧めします。ただし、キャプションだけでなく、最も近いキャプションを対象とするように JS を更新する必要がある場合があります。

于 2013-01-29T10:03:59.340 に答える
0 
<div id="images">
        <div>
            <div id="thetext" style="display:none">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
            <img id="theimage" src="images/test-image.png" width="224px" height="224px" />

        </div>
</div>
</body>
    <script>

        $(document).ready(function () {
            $("#theimage").click(function () {
                $("#thetext").slideToggle();
            });
        });

    </script>
于 2013-01-28T18:47:09.020 に答える
0

その解決：

このフィドルを見てください: http://jsfiddle.net/promatik/SFU4E/

HTMLを少し変更しました：

<div id="images">
    <div id="image">
        <div class="image">         
            <img src="images/test-image.png" width="275px" height="200px" />
        </div>
        <div class="text">
            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
        </div>
    </div>
</div>

そしてCSSも：

#images, #image .image {
    width: 275px;
    height: 200px;
}
#image .text {
    display: none;
    background: #000;
}
#image span {
    color: #ccc;
    padding: 2px;
}
于 2013-01-28T20:05:11.877 に答える