如何使网站网页版块上下移动.pdf

如何使网站网页版块上下移动 效果演示：/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 值，通过计算相关 值，定位相关版块调换后的所在位置。 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.