0

当您单击图像时，我希望文本描述出现（向上滑动），并且当您在已经显示时单击它时再次隐藏（向下滑动）。

JAVASCRIPT

<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。无论高度如何，这都会将其锚定到容器的底部可见时的标题。

然后你需要做的就是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 回答