Question

我希望您在单击图像时在图像下方显示（向上滑动）文本说明，并在您已经显示时单击它时再次隐藏（向下滑动）。

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。或者是否有任何其他插件可以用来完成此操作。

Answer 1

此效果的真正技巧是使包含的包装器位置：相对，然后在该位置内的包装器：绝对，顶部/右侧/底部设置为0.这将把它锚定到容器的底部，而不管标题的高度，当它可见时。

然后你需要做的就是滑动切换标题元素的显示。在我的工作中，我们只是切换了一个类并使用CSS过渡来覆盖显示，但我已经调整了我们的方法以与您的代码内联。

这是codepen example

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以定位最近的标题，而不仅仅是任何标题。

Answer 2

<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>

Answer 3

解决了：

看看这个小提琴：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;
}

单击图像时，使文本显示（向上滑动）

3 个答案: