Question

我正在尝试找到javascript代码，当我翻转图像时，会在图像下方显示一个框并向下展开（就像剧院中的电影屏幕如何从天花板滚动到地板）。在该框中，内容也会出现，我之前已添加，描述了上面的图像。已经存在于图像下方我有一个包含内容的div ...我还希望这个div能够在上面描述的框展开时向下推。

有什么建议吗？

非常感谢你！

C *

忘记我正在使用的代码......所以这里发生的事情是我有一张照片，在它下面是一个小盒子，当我翻转那个小盒子时它会改变颜色。所以，我想补充一点，当我滚动那个小盒子时，它不仅会改变颜色，而且还会在它下面显示新的垂直扩展框。我在一个* .js文件中有javascript来处理已经存在的翻转效果，但它很长，而且我不确定是否应该添加它（它是我在创建翻转图像时由Dreamweaver创建的）。

<div class="images">

<figure class="images">
<img src="../images/Flower2.jpg" width="300" height="199" alt="Life">
</figure>

<figcaption class="content"><a class="typeB" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','../graphics/life2.jpg',4)"><img src="../graphics/life1.jpg" width="300" height="25" id="Image3" /></a>
</figcaption>

</div>

Answer 1

只要扩展的div直接在标记中的图像之后，

这样的事情就应该这样做：

$(".class_for_images").on("mouseenter mouseleave", function() {
    var content = $(this).next();

    if (content.is(":visible")) {
        content.slideUp();
    } else {
        content.slideDown();
    }
});

如果你想要更多，或者它不起作用，你需要发布一些代码，以便我们可以提供更详细的答案......

Answer 2

您在提出有关当前设置的问题时没有提供太多信息，但假设您的 HTML 设置如下：

<div>
    <img id="tux" src="http://upload.wikimedia.org/wikipedia/commons/1/1c/Crystal_128_penguin.png" />
    <div id="tux_desc" class="imgDesc" style="display: none">
        <p>A cute penguin!</p>
    </div>
</div>
<div>
    <p>This text is part of the normal document flow</p>
</div>

然后您可以使用以下 JavaScript （使用jQuery）：

$('#tux').hover(
    function() {
        $('#tux_desc').slideDown();
    },
    function() {
        $('#tux_desc').slideUp();
    });

您可以在此处看到它：http://jsfiddle.net/wbAxm/1

javascript示例显示内容框

2 个答案: