Question

我对javascript一无所知，但我希望能够点击图片并增加页面大小。

实施例。一个500px x 500px的盒子，里面有一个图像。当您单击图像时，该框将增加到500px x 1000px，新内容在新区域内，而不会更改页面。

我该怎么做？

喜欢在这个网站上 http://kyanmedia.com/ 点击底部的地球虫

Answer 1

你可以在页面底部放下一个元素

<div id="extraDiv" style="display:none"> some extra stuff </div>

并使用javascript，执行

document.getElementById("extraDiv").style.display = "block";

使页面更长。如果你想要动画，那么你可以使用jQuery，scriptaculous或其他javascript库。

Answer 2

您可以使用jQuery来完成此操作，这将有很酷的滚动而不是刚刚弹出。你是div中的主要内容，然后是想要在隐藏div中显示的内容，例如：

<div>Main Content</div>
<div id="hiddenLab" style="display:none">Content to show</div>

然后，您将使用jQuery slideToggle命令上下滑动它，例如：

<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#hidden").click(function(){
                $("#about").slideToggle("slow");
            });
        });     
    </script>
    <style type="text/css">
        #maincontent { width:100%; height:100px;background:green} 
        #about { width:100%; height:1000px;display:none;background:red;} 
    </style>
</head>
<body>
    <div id="maincontent">
        <a id="hidden" href="#">Click to see hidden</a> 
    </div> 
    <div id="about">Content to show</div> 
</body>

使用Javascript提高页面高度

2 个答案: