Javascript示例显示内容框

javascript examples display content boxes

本文关键字：显示 Javascript      更新时间：2023-09-26

我试图找到javascript代码，当我翻转图像时，将使一个框出现在图像下方并向下扩展(很像影院中的电影屏幕如何从天花板滚动到地板)。在该框中，还会出现我之前添加的描述上面图像的内容。已经存在的图像下面，我有一个div的内容在里面…我还希望这个div在上面描述的框向下展开时被下推。

有什么建议吗?

提前非常感谢!

C *

忘记我正在使用的代码…这里发生的是，我有一张图片，在它下面，有一个小盒子，当我翻转这个小盒子时，它会改变颜色。我想补充的是，当我滚动到那个小框上时，它不仅仍然会改变颜色，而且它下面还会出现一个新的垂直扩展框。我有一个javascript *.js文件，处理已经存在的翻转效果，但它很长，我不确定我是否应该添加(它是由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>

你在你的问题中没有给出太多关于你当前设置的信息，但是假设你有你的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

只要要展开的div位于标记图像的后面就可以了:

$(".class_for_images").on("mouseenter mouseleave", function() {
    var content = $(this).next();
    if (content.is(":visible")) {
        content.slideUp();
    } else {
        content.slideDown();
    }
});

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

相关文章：