效果演示：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 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值，通过计算相关值，定位相关版块调换后的所在位置。

　　functio
  
信息网址：http://www.khcha.com/ziyuan/view10893.htm