进入贴吧 按标题检索 按内容检索 按作者检索 网页搜索 音乐检索
贴吧列表 | 推荐贴吧 | 精华主题 | 最热主题 | 申请吧主 | 我要举报 | 会员列表 | 用户登录 | 用户注册 | 忘记密码?
首 页 > 综合 > 电脑网络 > 建站技巧 > 怎样让网页上的版块上下移动 人气指数:[ 1902 ] 
本主题共有帖子数 1 篇,   [<<] [1] [>>]
1 怎样让网页上的版块上下移动
效果演示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值，通过计算相关值，定位相关版块调换后的所在位置。

　　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中读取这些配置信息并按该信息显示网页版块布局，还可以达到用户定制网页版块的效果。
作者:pantao     2009/9/17 7:39:48     打印   回复   短信
2 怎样让网页上的版块上下移动
要移动网页中的版块，最简单的办法就是控制Div层的所在位置，设计起来非常简单。首先在网页中添加Div层（用来添加网页内容），以每个Div层为一个版块上下排列，当鼠标点击某版块上的“上移”或“下移”按钮时，获取该版块之上或之下版块的Top值和高度值，将获取的Top值与该版块的Top值进行调换，再通过高度值算出需要调换的版块的高度差，将Top值减去或者加上高度差，便可以将两个版块进行调换了。利用相同原理，我们还可以通过获取版块的Left值和版块宽度值来实现版块之间的左右移动。
第一步 新建Div层 初始化版块
　　新建一个HTML页面，在与之间创建Div层，每个层为一个版块，再在之间输入初始化版块代码，其中关键代码如下所示：
　　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值，通过计算，定位相关版块调换后的所在位置。输入调换代码，其中关键代码如下所示：
　　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中读取这些配置信息并按该信息显示网页版块布局，就可以达到用户定制网页版块的效果
作者:pantao     2009/9/17 8:00:47     打印   回复   短信
本主题共有帖子数 1 篇,   [<<] [1] [>>]
总置顶帖子 | 撤销总置顶 | 置顶帖子 | 撤销置顶 | 精华帖子 | 撤销精华 | 锁定帖子 | 撤销锁定 | 加入收藏夹
标  题: *
ＵＢＢ:
ＵＢＢ: 粗体 斜体 下划线 左对齐 居中 右对齐 插入外部网址 插入邮箱地址 插入外部图片 插入代码 引用内容 ＋增加编辑行 －减少编辑行 →加大编辑框宽度 ←缩小编辑框宽度
内  容: *
* 注:系统要求你是会员身份才能使用上传功能!
图  片: （教您外部贴图）
验证码: * 看不清?点击更换验证码!
216.73.216.220  登录 | 注册 | 忘记密码
Powered by www.pantaowang.cn   PostBar v3.5 ACCESS      贴吧使用帮助      返回首页
 
蟠桃网，努力打造中国最大教育公益网络平台