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

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

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

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

第一步：初始化版塊

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

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

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

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