javascript示例显示内容框

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

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