网页伸缩框

伸缩框

下面我们使用Visual Studio这个软件来写一个小案例，我们可以用写一个简单的方法，就是实现一个网页右侧弹出伸缩框的功能效果。当你鼠标点击的时候进行伸缩。
那么这个代码要怎么写呢，首先我们需要先在界面上写一下的Html的代码，我们来看一下界面的代码是什么。
我们先看一下Html页面的截图：

在截图中我们可以看到界面的代码就是，很简单的直接给他一个div，还几个div嵌套着内容，然后接下来看一下属性代码的截图：

从上面可以看到，给这些标签写了几个属性的代码，设置一些他的属性值，还有一些颜色等。接着定义好界面的属性代码我们接着就需要写一下JS代码。然后实现出网页右侧弹出伸缩框的功能效果，见截图：

首先，我们看一下这个代码不是很长，我们先写一个window.onload的方法，这个方法是什么意思呢。onload的意思是事件会在页面或图像加载完成后立即发生，由于HTML加载时由上往下的，在HTML加载的时候，遇到function关键字，声明一个函数的时候，就会在内存中开辟一个新的空间来对函数进行存储，方便以后进行调用。 所以，当将function test()写到window.onload()=function(){}内部的时候，需要整个页面加载完成的之后，才声明这个函数。所以他在function里面获取了ID的对象，然后在写一个点击的效果，根据状态fly执行伸缩。接着就是写一个方法来判断他是伸还是缩，最后就是给他写了个3秒后页面自动进行伸缩的效果。
最后他的功能效果就做出来了，接下来我们看一下实现的效果：

最后就实现一个网页右侧弹出伸缩框的功能效果。