0

我试图找到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>
4

2 回答 2

1

只要要扩展的 div 直接位于标记中的图像之后，就应该这样做：

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

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

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

于 2012-12-20T10:14:45.183 回答
1

您在问题中没有提供有关当前设置的太多信息，但假设您的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

于 2012-12-20T10:15:48.547 回答