• “鹊桥”天梯的“四宗最” 2019-10-21
  • 北京法院诉讼档案实现互联网查阅 2019-10-21
  • 讲政德如何落到实处(专家观点) 2019-10-18
  • 解读习近平八一讲话:铭记辉煌历史 推进强军事业 2019-10-14
  • 吉祥法师:什么才是“相由心生”?了解一下 2019-10-14
  • 乌兰察布--内蒙古频道--人民网 2019-10-12
  • 游客被指捡石子砸老虎 北京野生动物园:正在核实 2019-10-12
  • 回复@老老保老张工:三大件为什么会让人自豪?因为你有钱都买不到,必须找关系批条子!所以结婚能有三大件,不仅表示有钱,还表示有关系。 2019-10-05
  • 致父亲——习近平与父亲的家国情 2019-10-04
  • 高清:葡萄牙明晨对阵西班牙 C罗领衔球队认真备战 2019-10-04
  • 明年起全国将全面供应“国六”汽柴油 2019-10-02
  • 流溪河森林公园美不胜收 2019-09-30
  • “工会是下岗职工真正的‘娘家’” 2019-09-30
  • 弘扬红船精神 当好勇立潮头城建排头兵 2019-09-27
  • ofo宣布全面取消免押金 还被曝出存在霸王条款 2019-09-27
  • 15选5走势图
    电话:13843226952
     
    工作时间:周一至周六:8:30-5:00  周日可联系客服QQ
       
      建站咨询㈠ 建站咨询㈡ 售后服务 售前咨询  
    关于阳光,吉林市网站建设,吉林市网站制作,网络公司
     当前位置:15选5走势图 >>> 网页设计

    新疆风彩25选7这么中奖:吉林网页制作上下移动的网页版块

    日期:2012/6/26    来自:15选5走势图   作者:Admin   去百度查找  去Google查找
        最近使用Google网站导航功能的时候,发现其网页上的版块是可以通过点击“上移”或者“下移”来调整位置,以方便用户阅读,这样人性化的功能放在个人的网站上,应该怎么做呢? 15选5走势图公司告诉您!

    自由自在,可以上下移动的网页版块制作

        我们可以利用JavaScript能够控制Div层的所在位置的原理,来实现移动网页版块的功能。在网页中添加Div层,以每个Div层为一个版块上下排列,当鼠标点击某版块上的“上移”或“下移”按钮时,获取该版块的之上或之下的版块的Top值和高度值,将获取的Top值与该版块的Top值进行调换,再通过高度值算出需要调换的版块的高度差,将Top值减去或者加上高度差,便可以将这两个版块进行调换了。

    第1步:初始化版块:

    新建一个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.lastChild.onclick=movedown; //当“下移”按钮层被点击的时候将激活movedown函数
    b.firstChild.style.cursor='pointer'; //鼠标移动到按钮层上将显示手形图标。
    b.lastChild.style.cursor='pointer';
    p.insertBefore(b,p.firstChild);
    }
    第2步 调换版块:
       
    初始化完版块,我们便可以着手版块之间的调换工作了,这一步是调换版块的关键,在调换之前,我们需要获取相关版块的高度和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中读取这些配置信息并按该信息显示网页版块布局,还可以达到用户定制网页版块的效果。

    15选5走势图 www.kdth.net     本文由15选5走势图友情提供,转载请注明出处。

        15选5走势图(15选5走势图)网站建设专家

     
    上一篇:如何做好吉林网页制作与设计
    下一篇:吉林网页制作单页面淘客站:方法及优化
      阳光新闻 更多>>>
    吉林网站建设_吉林网页制作-阳光新闻
    移动建站的优势在哪?
    如何规划网站的主题
    网站优化注意事项
    网站建设的趋势
    网站建设对企业发展有哪些助力
    小程序未来的市场前景
      招贤纳士 更多>>>
    诚聘销售精英合作伙伴
    诚招吉林市网站建设商务经理
    招聘吉林市网站建设技术员
    公司招收吉林市网站开发学员
    因业务发展需要特诚聘商务代表
      网站建设专题 更多>>>
    阳光科技为您提供网站改版服务
    为什么网页设计要简练?
    如何在百度提交收录,怎样让自己的网站排名
    什么样的网站最受访客喜欢?
    吉林市网站建设形式与内容应统一
    网站管理与团队经营的秘诀
    优质的单页网站如何创建
     
    Copyright © 2008-2019 15选5走势图, All Rights Reserved    
    电话:13843226952  联系人:王经理
    ICP备案号:吉ICP备10003760号   技术支持:15选5走势图
    打造好的15选5走势图!我们为您提供有品质的15选5走势图、15选5走势图、15选5走势图、15选5走势图、15选5走势图、15选5走势图服务!
  • “鹊桥”天梯的“四宗最” 2019-10-21
  • 北京法院诉讼档案实现互联网查阅 2019-10-21
  • 讲政德如何落到实处(专家观点) 2019-10-18
  • 解读习近平八一讲话:铭记辉煌历史 推进强军事业 2019-10-14
  • 吉祥法师:什么才是“相由心生”?了解一下 2019-10-14
  • 乌兰察布--内蒙古频道--人民网 2019-10-12
  • 游客被指捡石子砸老虎 北京野生动物园:正在核实 2019-10-12
  • 回复@老老保老张工:三大件为什么会让人自豪?因为你有钱都买不到,必须找关系批条子!所以结婚能有三大件,不仅表示有钱,还表示有关系。 2019-10-05
  • 致父亲——习近平与父亲的家国情 2019-10-04
  • 高清:葡萄牙明晨对阵西班牙 C罗领衔球队认真备战 2019-10-04
  • 明年起全国将全面供应“国六”汽柴油 2019-10-02
  • 流溪河森林公园美不胜收 2019-09-30
  • “工会是下岗职工真正的‘娘家’” 2019-09-30
  • 弘扬红船精神 当好勇立潮头城建排头兵 2019-09-27
  • ofo宣布全面取消免押金 还被曝出存在霸王条款 2019-09-27
  • 牛牛娱乐棋牌的规则 炸金花游戏大厅下载 福彩复式计算方法 安徽快3和值尾走势图 快乐双彩最新开奖公告 广东快乐10分计划 870404一点红开奖网一肖中特 陕西快乐10分开奖 机选双色球 雪缘园足球指数 足彩总进球 湖北快三走势图走势图 唐嫣公司老板wkb 3d复式7码多少钱 男人味六肖中特www