类google的上移和下移

来源：互联网发布：jdk 7u67 windows x32 编辑：程序博客网时间：2024/06/06 12:25

<META http-equiv=Content-Type content="text/html; charset=utf-8">
<STYLE>
.a7container {FLOAT: left; WIDTH: 385px; POSITION: relative}
.a2 {FLOAT: left; WIDTH: 385px; POSITION: relative;}
#rc4 {BACKGROUND: #b3d580; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px}
#rc6 {BACKGROUND: #99c9b1; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 100px}
#rc8 {BACKGROUND: #b4a1d8; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 200px}
#rc5 {BACKGROUND: #f7c480; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px}
#rc7 {BACKGROUND: #d5d588; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 100px}
#rc9 {BACKGROUND: #eea2bb; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 200px}
</STYLE>
<BODY>
<DIV><SPAN id=sd_up style="VISIBILITY: hidden">上移</SPAN><SPAN id=sd_down
style="VISIBILITY: hidden">下移</SPAN></DIV>
<DIV class=a2 style="MARGIN-RIGHT: 0px! important">
<DIV id=rc4>
<DIV id=bt4></DIV>
</DIV>

<DIV id=rc6>
<DIV id=bt6></DIV>
</DIV>

<DIV id=rc8>
<DIV id=bt8></DIV>
</DIV>

</DIV>
<SCRIPT></SCRIPT>
</BODY>
应用例子
<?xml version="1.0" encoding="gb2312"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Test page</title>
<meta name="Author" content="mozart0" />
<style type="text/css">
/*<![CDATA[*/
ul{
  width:400px
}
li{
  border:1px solid gray;
  list-style:none
}
.txt{
  padding:4px;
  background-color:#ffffff
}
/*]]>*/
</style>
<script language="javascript" type="text/javascript">
//<![CDATA
window.onload=function(){
  ggGroup(document.getElementById('test'),5);
};
function ggGroup(ele,margin){
  margin=margin||0;
  var bgcolors='#b3d580,#99c9b1,#b4a1d8,#f7c480,#d5d588,#eea2bb'.split(',');
  var txtUp='上移↑ ',txtDown='下移↓';
  var panels=children(ele);
  for(var i=0,h=0;i<panels.length;i++){
    var p=panels[i];
    p.style.position='absolute';
    p.style.width='100%';
    var b=document.createElement('div');
    with(b.style){
      fontSize='12px';
      padding='4px';
      backgroundColor=bgcolors[i%bgcolors.length];
      textAlign='right';
    }
    b.innerHTML='<span>'+txtUp+'</span><span>'+txtDown+'</span>';
    b.firstChild.onclick=moveup;
    b.firstChild.style.cursor='pointer';
    b.lastChild.onclick=movedown;
    b.lastChild.style.cursor='pointer';
    p.insertBefore(b,p.firstChild);
    p.style.top=h+'px';
    p.index=i;
    h+=p.offsetHeight+margin;
  }
  ele.style.height=h+'px';
  ele.style.position='relative';
  check(0,i-1);
  function check(){
    for(var i=0;i<arguments.length;i++){
      var x=arguments[i];
      var c=panels[x].firstChild.childNodes;
      c[0].style.visibility=x==0?'hidden':'visible';
      c[1].style.visibility=x==panels.length-1?'hidden':'visible';
      panels[x].index=x;
    }
  }
  function moveup(evt){
    var p=evt?evt.target:event.srcElement;
    p=p.parentNode.parentNode;
    swap(p,panels[p.index-1]);
  }
  function movedown(evt){
    var p=evt?evt.target:event.srcElement;
    p=p.parentNode.parentNode;
    swap(p,panels[p.index+1]);
  }
  function swap(p1,p2){
    var N=10;
    var INTV=200;
    var arr1,arr2;
    var t1=parseInt(p1.style.top),t2=parseInt(p2.style.top);
    var h1=p1.offsetHeight+margin,h2=p2.offsetHeight+margin;
    arr1=makeArr(t1,t1<t2?h2:-h2);
    arr2=makeArr(t2,t1<t2?-h1:h1);
    for(var i=0;i<N;i++)(function(){
      var j=i;
      setTimeout(function(){
        p1.style.top=arr1[j]+"px";
        p2.style.top=arr2[j]+"px";
        if(j==N-1){
          panels[p1.index]=p2;
          panels[p2.index]=p1;
          check(p1.index,p2.index);
        }
      },(j+1)*INTV/N);
    })();
    function makeArr(f,x){
      var ret=[];
      for(var i=0;i<N;i++)
        ret[i]=Math.round(f+i*x/(N-1));
      return ret;
    }
  }
  function children(e){
    var ret=[];
    for(var i=0,c=e.childNodes;i<c.length;i++)
      if(c[i].nodeType==1)
        ret.push(c[i]);
    return ret;
  }
}
//]]>
</script>
</head>
<body>
<ul id="test">
  <li>
    <div class="txt"><h2>Hello<br />baby</h2></div></li>
  <li>
    <div class="txt">
      <img src="http://pages.blueidea.com/articleimg/2007/01/1403/preview_s01.jpg" />
    </div></li>
  <li>
    <div class="txt">
      <i>人之初，性本善</i>
    </div></li>
  <li>
    <div class="txt">
      may be you are right<br />may be<br />...<br />but i don't understand
    </div></li>
</ul>
</body>
</html>
===========
带位置保存到本地cookise
<?xml version="1.0" encoding="gb2312"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Test page</title>
<meta name="Author" content="mozart0" />
<style type="text/css">
/*<![CDATA[*/
ul{
  width:400px
}
li{
  border:1px solid gray;
  list-style:none
}
.txt{
  padding:4px;
  background-color:#ffffff
}
.title{
  font:bold 14px/20px verdana;
  position:absolute;
  top:0px;
}
/*]]>*/
</style>
<script language="javascript" type="text/javascript">
//<![CDATA
window.onload=function(){
  var g=ggGroup(document.getElementById('test'),5,true);
  //var a=g.serialize();
  //g.setup(a.reverse());
};
function ggGroup(ele,margin,useCookie){
  //////////
  //by mozart0, 2007.06.09
  //////////
  margin=margin||0;
  var bgcolors='#b3d580,#99c9b1,#b4a1d8,#f7c480,#d5d588,#eea2bb'.split(',');
  var txtUp='上移↑ ',txtDown='下移↓ ';
  var panels=children(ele);
  for(var i=0;i<panels.length;i++){
    var p=panels[i];
    p.style.position='absolute';
    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='<span>'+txtUp+'</span><span>'+txtDown+'</span>';
    b.firstChild.onclick=moveup;
    b.firstChild.style.cursor='pointer';
    b.lastChild.onclick=movedown;
    b.lastChild.style.cursor='pointer';
    p.insertBefore(b,p.firstChild);
  }
  var retObj={
    save:function(){
      setCookie('gg_'+ele.id,
        retObj.serialize().join(','),7*24);
      },
    load:function(){
      var a=getCookie('gg_'+ele.id);
      retObj.setup(a?a.split(','):null);
      },
    serialize:function(){
      for(var i=0,a=[],c=children(ele);i<c.length;i++)
        a.push(c[i].index);
      return a;
      },
    setup:function(a){
      var c=children(ele);
      if(a&&a.length==c.length){
        panels=new Array(c.length);
        for(var i=0;i<a.length;i++)
          panels[a[i]]=c[i];
        }
      for(var i=0,h=0,c=[];i<panels.length;i++){
        panels[i].style.top=h+'px';
        h+=panels[i].offsetHeight+margin;
        c.push(i);
        }
      check.apply(null,c);
      ele.style.height=h+'px';
      ele.style.position='relative';
      }
    };
  if(useCookie){
    retObj.load();
    window.attachEvent?
      window.attachEvent('onunload',retObj.save):
      window.addEventListener('unload',retObj.save,false);
    }
  else
    retObj.setup(null);
  return retObj;
  function setCookie(name,value,expires){
    var x=name+"="+escape(value);
    if(expires){
      var d=new Date();
      d.setTime(d.getTime()+expires*24*3600*1000);
      x+="; Expires="+d.toGMTString();
      }
    document.cookie=x;
    }
  function getCookie(name){
    var a=document.cookie.split("; ");
    name+="=";
    for(var i=0;i<a.length;i++)
      if(a[i].indexOf(name)==0)
        return unescape(a[i].substr(name.length));
    return "";
    }
  function check(){
    for(var i=0;i<arguments.length;i++){
      var x=arguments[i];
      var c=panels[x].firstChild.childNodes;
      c[0].style.display=x==0?'none':'';
      c[1].style.display=x==panels.length-1?'none':'';
      panels[x].index=x;
    }
  }
  function moveup(evt){
    var p=evt?evt.target:event.srcElement;
    p=p.parentNode.parentNode;
    swap(p,panels[p.index-1]);
  }
  function movedown(evt){
    var p=evt?evt.target:event.srcElement;
    p=p.parentNode.parentNode;
    swap(p,panels[p.index+1]);
  }
  function swap(p1,p2){
    var N=10;
    var INTV=200;
    var arr1,arr2;
    var t1=parseInt(p1.style.top),t2=parseInt(p2.style.top);
    var h1=p1.offsetHeight+margin,h2=p2.offsetHeight+margin;
    arr1=makeArr(t1,t1<t2?h2:-h2);
    arr2=makeArr(t2,t1<t2?-h1:h1);
    for(var i=0;i<N;i++)(function(){
      var j=i;
      setTimeout(function(){
        p1.style.top=arr1[j]+"px";
        p2.style.top=arr2[j]+"px";
        if(j==N-1){
          panels[p1.index]=p2;
          panels[p2.index]=p1;
          check(p1.index,p2.index);
        }
      },(j+1)*INTV/N);
    })();
    function makeArr(f,x){
      var ret=[];
      for(var i=0;i<N;i++)
        ret[i]=Math.round(f+i*x/(N-1));
      return ret;
    }
  }
  function children(e){
    var ret=[];
    for(var i=0,c=e.childNodes;i<c.length;i++)
      if(c[i].nodeType==1)
        ret.push(c[i]);
    return ret;
  }
}
//]]>
</script>
</head>
<body>
<ul id="test">
  <li>
    <div class="txt">
      <div class="title">Title A</div>
      <h2>Hello<br />baby</h2></div></li>
  <li>
    <div class="txt">
      <div class="title">Title B</div>
      <img src="http://pages.blueidea.com/articleimg/2007/01/1403/preview_s01.jpg" />
    </div></li>
  <li>
    <div class="txt">
      <div class="title">Title C</div>
      <i>人之初，性本善</i>
    </div></li>
  <li>
    <div class="txt">
      <div class="title">Title D</div>
      may be you are right<br />may be<br />...<br />but i don't understand
    </div></li>
</ul>
</body>
</html>