类似265上下移动层25175,专业教育软件开发,数字化项目建设,专业软件开发，制作

<?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=UTF-8" />
<title>上下移动层 Test page by 25175</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 ATitle ATitle ATitle ATitle ATitle ATitle Asfsdfsdf</div>
      <h2>Hello<br />baby
			<ul><li></li></ul>
			
			</h2></div>
	</li>
<li>
    <div class="txt">
      <div class="title">Title B</div>
      11111
    </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>
by 25175

提示：您可以先修改部分代码再运行，如需引入外部Js文件需刷新才能执行

关于我们

新手上路

支付方式

商家入驻