最近使用Google網站導航功能的時候，發(fā)現其網頁上的版塊是可以通過點擊“上移”或者“下移”來調整位置，以方便用戶閱讀。如果你也想給自己的網站添加這樣人性化的功能，應該怎么做呢？ 自由自在，可以上下

最近使用Google網站導航功能的時候，發(fā)現其網頁上的版塊是可以通過點擊“上移”或者“下移”來調整位置，以方便用戶閱讀。如果你也想給自己的網站添加這樣人性化的功能，應該怎么做呢？

自由自在，可以上下移動的網頁版塊制作

我們可以利用JavaScript能夠控制Div層的所在位置的原理，來實現移動網頁版塊的功能。具體操作如下：

第一步：初始化版塊

新建一個HTML頁面，在body中創(chuàng)建Div層，每個Div層為一個版塊上下排列。然后在每個版塊上添加一個“上移”和“下移”的按鈕層。通過JavaScript代碼將版塊設置為可拖動型Div，并設置按鈕層的屬性。

第二步：調換版塊

當鼠標點擊某版塊上的“上移”或“下移”按鈕時，獲取該版塊的之上或之下的版塊的Top值和高度值，將獲取的Top值與該版塊的Top值進行調換。再通過高度值算出需要調換的版塊的高度差，將Top值減去或者加上高度差，便可以將這兩個版塊進行調換了。

通過以上步驟，我們就可以實現網站網頁版塊的上下移動功能了。