怎樣實現(xiàn)網(wǎng)站網(wǎng)頁版塊的上下移動

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

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

自由自在，可以上下移動的網(wǎng)頁版塊制作

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

第一步：初始化版塊

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

第二步：調(diào)換版塊

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

通過以上步驟，我們就可以實現(xiàn)網(wǎng)站網(wǎng)頁版塊的上下移動功能了。