怎样实现网站网页版块的上下移动

最近使用Google网站导航功能的时候，发现其网页上的版块是可以通过点击“上移”或者“下移”来调整位置，以方便用户阅读。如果你也想给自己的网站添加这样人性化的功能，应该怎么做呢？

自由自在，可以上下移动的网页版块制作

我们可以利用JavaScript能够控制Div层的所在位置的原理，来实现移动网页版块的功能。具体操作如下：

第一步：初始化版块

新建一个HTML页面，在body中创建Div层，每个Div层为一个版块上下排列。然后在每个版块上添加一个“上移”和“下移”的按钮层。通过JavaScript代码将版块设置为可拖动型Div，并设置按钮层的属性。

第二步：调换版块

当鼠标点击某版块上的“上移”或“下移”按钮时，获取该版块的之上或之下的版块的Top值和高度值，将获取的Top值与该版块的Top值进行调换。再通过高度值算出需要调换的版块的高度差，将Top值减去或者加上高度差，便可以将这两个版块进行调换了。

通过以上步骤，我们就可以实现网站网页版块的上下移动功能了。

版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。