网页版块也可上下移动

技术与开发

重庆 超人 · 2008年6月9日 第22期

糖糖很喜欢看保健类的新闻，但是很多网站都把这类新闻放在网页靠后的位置，真是恨不得自己是网站的编辑，把保健新闻提到网页顶部。糖糖哀叹道：“哎！要是网页版块能够移动该多好！”

要移动网页中的版块，最简单的办法就是控制Div层的所在位置，设计起来非常简单。首先在网页中添加Div层（用来添加网页内容），以每个Div层为一个版块上下排列，当鼠标点击某版块上的“上移”或“下移”按钮时，获取该版块之上或之下版块的Top值和高度值，将获取的Top值与该版块的Top值进行调换，再通过高度值算出需要调换的版块的高度差，将Top值减去或者加上高度差，便可以将两个版块进行调换了。利用相同原理，我们还可以通过获取版块的Left值和版块宽度值来实现版块之间的左右移动。

第一步 新建Div层 初始化版块

新建一个HTML页面，在与之间创建Div层，每个层为一个版块，再在之间输入初始化版块代码，其中关键代码如下所示（完整代码请到http://www.cpcw.com/bzsoft下载）：

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函数

第二步 实现版块上下调换

初始化完版块后，我们便可以着手版块之间的调换工作了。在这一步，我们须要获取相关版块的高度和Top值，通过计算，定位相关版块调换后的所在位置。输入调换代码，其中关键代码如下所示（完整代码请到http://www.cpcw.com/bzsoft下载）：

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函数的功能是改变版块中“上移”和“下移”按钮的显示状态，顶部版块将不显示“上移”按钮，底部版块将不显示“下移”按钮

第三步 添加网页内容

调换功能实现后，只要在版块里将想要显示的网页内容添加到Div层里，就完成了所有的制作步骤。最后运行程序，点击“上移”或者“下移”按钮，就可以看到版块上下移动的效果了。

总结

这种可以上下移动的网页版块，让用户能更方便地查看网站上的信息，加强了网页的交互性。如果我们将用户的版块配置信息添加到Cookies中，用户下次访问时再从Cookies中读取这些配置信息并按该信息显示网页版块布局，就可以达到用户定制网页版块的效果。