效果演示：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