如何使網站網頁版塊上下移動

仲介交易 HTTP://www.aliyun.com/zixun/aggregation/6858.html">SEO診斷 淘寶客 雲主機 技術大廳

效果演示：HTTP://www.59seo.com.cn/dmys/wangyeyd.html

最近使用Google網站導航功能的時候，發現其網頁上的版塊是可以通過點擊「上移」或者「下移」來調整位置，以方便使用者閱讀，我也想把這樣人性化的功能放在我的網站上，應該怎麼做呢?

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

我們可以利用JavaScript能夠控制Div層的所在位置的原理，來實現移動網頁版塊的功能。 在網頁中添加Div層，以每個Div層為一個版塊上下排列，當滑鼠點擊某版塊上的「上移」或「下移」按鈕時，獲取該版塊的之上或之下的版塊的Top值和高度值，將獲取的Top值與該版塊的Top值進行調換， 再通過高度值算出需要調換的版塊的高度差，將Top值減去或者加上高度差，便可以將這兩個版塊進行調換了。

第一步：初始化版塊。

新建一個HTML頁面，在與之間創建Div層，每個層為一個版塊，再在之間輸入初始化版塊的JavaScript代碼：

var bgcolors='#b3d580,#99c9b1,#b4a1d8,#f7c480,#d5d588,#eea2bb'.split(','); 各個版塊的顏色代碼

var txtUp='上移↑ ',txtDown='下移↓ ';

var 863.html">panels=children(ele); 獲取所有版塊物件

for(var i=0;i

var p=panels[i];

p.style.position='absolute'; 將版塊設置為可拖動型Div

p.style.width='100%';

var b=document.createElement('div'); 在版塊上創建一個「上移」或「下移」的按鈕層

with(b.style){ //設置按鈕層的屬性

fontSize='12px';

lineHeight='20px';

backgroundColor=bgcolors[i%bgcolors.length];

textAlign='right';

}

b.innerHTML=''+txtUp+''+txtDown+'';

b.firstChild.onclick=moveup; 當「上移」按鈕層被點擊的時候將啟動moveup函數

b.firstChild.style.cursor='pointer'; 滑鼠移動到按鈕層上將顯示手形圖示。

b.lastChild.onclick=movedown; 當「下移」按鈕層被點擊的時候將啟動movedown函數

b.lastChild.style.cursor='pointer';

p.insertBefore(b,p.firstChild);

}

第二步 調換版塊。

初始化完版塊，我們便可以著手版塊之間的調換工作了，這一步是調換版塊的關鍵，在調換之前，我們需要獲取相關版塊的高度和Top值，通過計算相關值，定位相關版塊調換後的所在位置。

function moveup(evt){ //控制版塊上移的主函數

var p=evt?evt.target:event.srcElement; 獲取滑鼠點擊的物件(相容大部分瀏覽器)

p=p.parentNode.parentNode; 尋找父物件

swap(p,panels[p.index-1]); swap函數這裡的作用是將某版塊與其上面的版塊位置對調

}

function movedown(evt){

var p=evt?evt.target:event.srcElement;

p=p.parentNode.parentNode;

swap(p,panels[p.index+1]); swap函數這裡的作用是將某版塊與其下面的版塊位置對調

}

function swap(p1,p2){

var N=10; 控制版塊之間移動次數，數位越大，調換效果越好，但會佔用一定電腦資源

var INTV=500; 控制版塊之間移動時間，數位越大，移動速度相對越慢，單位為毫秒

var arr1,arr2;

var t1=parseInt(p1.style.top),t2=parseInt(p2.style.top); 獲取需要調換的版塊的Top值

var h1=p1.offsetHeight+margin,h2=p2.offsetHeight+margin; 獲取版塊的高度值

arr1=makeArr(t1,t1

arr2=makeArr(t2,t1

for(var i=0;i

var j=i;

setTimeout(function(){ //每間隔一個時間調用一次該程式

p1.style.top=arr1[j]+"px"; 將每段時間的Top值依次賦給版塊的Top屬性，達到移動效果

p2.style.top=arr2[j]+"px";

if(j==N-1){

panels[p1.index]=p2;

panels[p2.index]=p1;

check(p1.index,p2.index); check函數的功能是改變版塊中「上移」和「下移」按鈕的顯示狀態，頂部版塊將不顯示「上移」按鈕，底部版塊將不顯示「下移」按鈕

}

},(j+1)*INTV/N);

})();

function makeArr(f,x){ // makeArr函數計算每個時間段版塊的Top值，並將這些值以陣列的形式返回

var ret=[];

for(var i=0;i

ret[i]=Math.round(f+i*x/(N-1));

return ret;

}

}

總結

這種可以上下移動的網頁版塊，讓使用者能更方便的查看網站上的資訊，加強了網頁的交互性;如果我們將使用者的版塊配置資訊記錄到Cookie中，使用者下次訪問時再從Cookie中讀取這些配置資訊並按該資訊顯示網頁版塊佈局， 還可以達到使用者定制網頁版塊的效果。

小站歡迎您 :HTTP://www.59seo.com.cn