Fatal编程技术网

使用Javascript增加页面高度

javascript

使用Javascript增加页面高度,javascript,Javascript,我对javascript一无所知，但我希望能够单击图像并增加页面大小 例如。一个500像素x 500像素的盒子，里面有图像。当你点击一个图像时，框会增加到500px x 1000px，在新的区域内有新的内容，而不会改变页面 我该怎么做 比如在这个网站上 单击底部的地球蠕虫您可以在页面底部找到一个元素 <div id="extraDiv" style="display:none"> some extra stuff </div> 使页面变长。如果您想要动画，那么可以使用j

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

例如。一个500像素x 500像素的盒子，里面有图像。当你点击一个图像时，框会增加到500px x 1000px，在新的区域内有新的内容，而不会改变页面

我该怎么做

比如在这个网站上
单击底部的地球蠕虫

您可以在页面底部找到一个元素

<div id="extraDiv" style="display:none"> some extra stuff </div>
使页面变长。如果您想要动画，那么可以使用jQuery、scriptaculous或其他javascript库。

您可以使用它来完成这项任务，它将有一个很酷的滚动条，而不是仅仅弹出。如果你是一个div中的主要内容，那么你想在一个隐藏的div中显示的内容，比如：

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

主要内容
心满意足
然后使用jQuery命令将其上下滑动，如：

<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>


$（函数（）{
$（“#隐藏”）。单击（函数（）{
$（“关于”）。滑动切换（“慢”）；
});
});     
#主内容{宽度：100%；高度：100px；背景：绿色}
#大约{宽度：100%；高度：1000px；显示：无；背景：红色；}
心满意足
它是如何从500x500“增加”到500x100的？100px比500px小。。。你是说1000px吗？嗯，是的，哈哈，我想在这个网站上点击底部的earty蠕虫。我今天做得不好。我的意思是jQuery命令放在Javascript中。jQuery只是一个javascript库。要运行上述代码，请使用id=“蚯蚓”添加元素（图像、链接等），单击该元素时将触发上述代码。查看这些视频（），快速了解jQuery。如果你感兴趣，它非常容易学习，你可以用它做一些很好的事情。我无法让它工作。脚本是：$（“隐藏”）.click（）{$（“关于”）.slideToggle（“慢”}）；HTML是：


要显示的内容，CSS是：#maincontent{width:auto；height:1000px；}关于{width:auto；height:1000px；}帮助？是否包含jQuery.js文件？重新阅读那里的代码，尝试$（“about”）.slideToggle（“slow”）；不是$（“大约”）.slideToggle（“慢”；}）；或者甚至试着输入一个警报（），看看点击代码是否触发。不，HTML和脚本仍然无法工作。$（“隐藏”）。点击（）{$（“关于”）。滑动切换（“慢”）；



内容显示CSS:#主内容{宽度：100%；高度：100%；}#关于{宽度：自动；高度：1000px；} 
<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>