类google的上移和下移[网页特效]

FontSize:- + Date: 2008年2月7日

摘要：不错的效果，在阿里巴巴的商务站经用过这种效果。DIV的上移和下移，并可以记录cookie只要移到中间，就有上移与下移

只要移到中间，就有上移与下移

<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><!--
function s(a){if(a in y){return y[a]}return y[a]=navigator.userAgent.toLowerCase().indexOf(a)!=-1}var y={};function H(){return s("msie")&&!window.opera}function ua(a){if(typeof Error!="undefined"){throw new Error(a||"Assertion Failed");}else{throw a;}}function da(a){if(a===undefined)a="Assertion failed";if(t(L))L(a+"\n");ua(a)}function Y(a,b){if(!a){if(b===undefined)b="Assertion failed";da(b)}};function ka(a,b,c,d,e){b=""+b;Y(typeof a=="string"&&typeof b=="string"&&!a.match(/[\s;]/)&&!b.match(/[\s;]/),
"trying to set an invalid cookie");if(!t(c))c=-1;if(!t(d))d="/";if(!t(e))e=null;var i=e==null?"":";domain="+e,h=d==null?"":";path="+d,u;if(c<0){u=""}else if(c==0){var fa=new Date(1970,1,1);u=";expires="+fa.toUTCString()}else{var ga=new Date(O()+c*1000);u=";expires="+ga.toUTCString()}document.cookie=a+"="+b+i+h+u};function ea(a){var b=a+"=",c=String(document.cookie);for(var d=-1;(d=c.indexOf(b,d+1))>=0;){var e=d;while(--e>=0){var i=c.charAt(e);if(i==";"){e=-1;break}else if(" \t".indexOf(i)<0){break}}if(-1===
e){var h=c.indexOf(";",d);if(h<0){h=c.length}return c.substring(d+b.length,h)}}return""}function O(){return(new Date).getTime()}var la=/&/g,ra=/</g,qa=/>/g;function N(a){if(!a)return"";return a.replace(la,"&").replace(ra,"<").replace(qa,">").replace(ta,""")}var ta=/\"/g;function t(a){return typeof a!="undefined"}function na(a){return document.getElementById(a)}function oa(a){return document.all[a]}var ma=document.getElementById?na:oa;function X(a){try{if(window.parent!=window&&window.parent.log){window.parent.log(window.name+
"::"+a);return}}catch(b){}var c=ma("log");if(c){var d="<p class=logentry><span class=logdate>"+new Date+"</span><span class=logmsg>"+a+"</span></p>";c.innerHTML=d+c.innerHTML}else{window.status=a}};var K=false;function L(a){try{throw a;}catch(b){M(b)}}function M(a,b){var c="Javascript exception: "+(b?b:"")+" "+a;if(H()){c+=" "+a.name+": "+a.message+" ("+a.number+")"}var d="";if(typeof a=="string"){d=a+"\n"}else{for(var e in a){try{d+=e+": "+a[e]+"\n"}catch(i){}}}d+=I(M.caller);ba(c+"\n"+d,1)}var pa=/function (\w+)/;function $(a){var b=pa.exec(String(a));if(b){return b[1]}return""}function I(a){try{if(!H()&&!(s("safari")||s("konqueror"))&&s("mozilla")){return Error().stack}if(!a)return"";var b=
"- "+$(a)+"(";for(var c=0;c<a.arguments.length;c++){if(c>0)b+=", ";var d=String(a.arguments[c]);if(d.length>40){d=d.substr(0,40)+"..."}b+=d}b+=")\n";b+=I(a.caller);return b}catch(e){return"[Cannot get stack trace]: "+e+"\n"}}var ca;var j=null,z=false;function aa(){if((j==null||j.closed)&&!z){try{z=true;j=window.open("","debug","width=700,height=500,toolbar=no,resizable=yes,scrollbars=yes,left=16,top=16,screenx=16,screeny=16");j.blur();j.document.open();z=false;var a="<font color=#ff0000><b>To turn off this debugging window,hit 'D' inside the main caribou window, then close this window.</b></font><br>";
J(a)}catch(b){}}}function ba(a,b){if(!K){if(typeof X!="undefined"){X(N(a))}return}try{var c=O()-ca,d="["+c+"] "+N(a).replace(/\n/g,"<br>")+"<br>";if(b==1){d="<font color=#ff0000><b>Error: "+d+"</b></font>";j.focus()}}catch(e){}J(d)}function J(a){if(!K){return}try{aa();j.document.write(a);j.scrollTo(0,1000000)}catch(b){}};var w=null,o=null,r=null,A=0,E=0,C=false,q=0,P=0,k=0,x=0,B=0,V,n=[0,100,200],l=0,g=[0,0,0,0,1,1,2,2,3,3],ha=(n[1]-n[0])/2;function f(a){return document.getElementById(a)}function m(a){return(a/2-1)%3*2+4}function T(a,b,c,d){v(f("rc"+b),d);v(f("rc"+a),c);f("rc"+a).style["zIndex"]=9999;f("rc"+b).style["zIndex"]=9998}function v(a,b){var c=a.style;if("opacity"in c){c.opacity=b}else if("MozOpacity"in c){c.MozOpacity=b}else if("KhtmlOpacity"in c){c.KhtmlOpacity=b}else if("filter"in c){c.filter="alpha(opacity="+
b*100+")"}}function U(a){var b=['<span style="cursor:pointer" onclick="_md('];b.push(a);b.push(')">');b.push(f("sd_down").innerHTML);b.push("<b>↓</b></span>");f("bt"+a).innerHTML=b.join("")}function D(a){var b=['<span style="cursor:pointer" onclick="_mu('];b.push(a);b.push(')">');b.push(f("sd_up").innerHTML);b.push('<b>↑</b></span><span style="cursor:pointer"onclick="_md(');b.push(a);b.push(')">');b.push(f("sd_down").innerHTML);b.push("<b>↓</b></span>");f("bt"+a).innerHTML=b.join("")}
function S(a){var b=['<span style="cursor:pointer" onclick="_mu('];b.push(a);b.push(')">');b.push(f("sd_up").innerHTML);b.push("<b>↑</b></span>");f("bt"+a).innerHTML=b.join("")}function Q(a){return parseInt(a.offsetTop,10)}function p(a,b){a.style["top"]=b+"px"}function R(a){if(w!=null){return}var b=g[a],c=b+1,d=m(a),e=g[d]==c?d:m(d);l=0;T(a,e,1,0.6);o=f("rc"+a);r=f("rc"+e);q=n[c-1];P=n[b-1];k=Q(o);x=Q(r);B=b;A=a;E=e;var i=g[a];g[a]=g[e];g[e]=i;ka("a","(["+g.toString()+"])",86400000,"/","daohang.google.cn");
ia();var h=32;C=false;V=window.setInterval(W,h);w=1}function ja(a){if(w!=null){return}var b=g[a],c=b-1,d=g[m(a)]==c?m(a):m(m(a));R(d);T(a,d,1,0.6)}function ia(){(new Image).src="/?ct=mov&cd="+g.join("")}function W(){if(k<=q){if(k+5+l>=q){p(o,q);p(r,P);v(o,1);v(r,1);window.clearInterval(V);w=null;return}else{l+=2;p(o,k+5+l);p(r,x-5-l);k=k+5+l;x=x-5-l}}if(!C&&k>=q-ha){if(B==1){D(A);U(E)}else if(B==2){S(A);D(E)}C=true}}var _md=R,_mu=ja,_sp=W;(function(){var a=ea("a");if(a!=0){g=eval(a)}var b=[U,D,S];
for(var c=4;c<10;c+=2){p(f("rc"+c),n[g[c]-1]);b[g[c]-1](c)}})();function Z(a){return function(){var b=a.id.split(":"),c,d=window.navigator.userAgent.indexOf("MSIE")!=-1;if(b.length==4){var e=window.encodeURIComponent?window.encodeURIComponent:window.escape,i=d?"T":"t";c=["http://www.google.cn/url?sa=",i,"&url=",e(a.href),"&usg=",b[0],"&ct=",b[1],"&cd=",b[2],"&cad=",b[3],"&source=shallowdir"]}else if(b.length==3){c=[a.href,"?ct=",b[0],"&cd=",b[1],"&cad=",b[2]]}var h=c.join("");if(d){(new Image).src=h}else{a.href=h;a.onmousedown=""}return true}}if(document.images){var sa=
document.links.length;for(var F=0;F<sa;++F){var G=document.links[F];if(G.id){G.onmousedown=Z(G)}}};
//--></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>

提示：您可以先修改部分代码再运行

只要移到中间，就有上移与下移

<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><!--
function s(a){if(a in y){return y[a]}return y[a]=navigator.userAgent.toLowerCase().indexOf(a)!=-1}var y={};function H(){return s("msie")&&!window.opera}function ua(a){if(typeof Error!="undefined"){throw new Error(a||"Assertion Failed");}else{throw a;}}function da(a){if(a===undefined)a="Assertion failed";if(t(L))L(a+"\n");ua(a)}function Y(a,b){if(!a){if(b===undefined)b="Assertion failed";da(b)}};function ka(a,b,c,d,e){b=""+b;Y(typeof a=="string"&&typeof b=="string"&&!a.match(/[\s;]/)&&!b.match(/[\s;]/),
"trying to set an invalid cookie");if(!t(c))c=-1;if(!t(d))d="/";if(!t(e))e=null;var i=e==null?"":";domain="+e,h=d==null?"":";path="+d,u;if(c<0){u=""}else if(c==0){var fa=new Date(1970,1,1);u=";expires="+fa.toUTCString()}else{var ga=new Date(O()+c*1000);u=";expires="+ga.toUTCString()}document.cookie=a+"="+b+i+h+u};function ea(a){var b=a+"=",c=String(document.cookie);for(var d=-1;(d=c.indexOf(b,d+1))>=0;){var e=d;while(--e>=0){var i=c.charAt(e);if(i==";"){e=-1;break}else if(" \t".indexOf(i)<0){break}}if(-1===
e){var h=c.indexOf(";",d);if(h<0){h=c.length}return c.substring(d+b.length,h)}}return""}function O(){return(new Date).getTime()}var la=/&/g,ra=/</g,qa=/>/g;function N(a){if(!a)return"";return a.replace(la,"&").replace(ra,"<").replace(qa,">").replace(ta,""")}var ta=/\"/g;function t(a){return typeof a!="undefined"}function na(a){return document.getElementById(a)}function oa(a){return document.all[a]}var ma=document.getElementById?na:oa;function X(a){try{if(window.parent!=window&&window.parent.log){window.parent.log(window.name+
"::"+a);return}}catch(b){}var c=ma("log");if(c){var d="<p class=logentry><span class=logdate>"+new Date+"</span><span class=logmsg>"+a+"</span></p>";c.innerHTML=d+c.innerHTML}else{window.status=a}};var K=false;function L(a){try{throw a;}catch(b){M(b)}}function M(a,b){var c="Javascript exception: "+(b?b:"")+" "+a;if(H()){c+=" "+a.name+": "+a.message+" ("+a.number+")"}var d="";if(typeof a=="string"){d=a+"\n"}else{for(var e in a){try{d+=e+": "+a[e]+"\n"}catch(i){}}}d+=I(M.caller);ba(c+"\n"+d,1)}var pa=/function (\w+)/;function $(a){var b=pa.exec(String(a));if(b){return b[1]}return""}function I(a){try{if(!H()&&!(s("safari")||s("konqueror"))&&s("mozilla")){return Error().stack}if(!a)return"";var b=
"- "+$(a)+"(";for(var c=0;c<a.arguments.length;c++){if(c>0)b+=", ";var d=String(a.arguments[c]);if(d.length>40){d=d.substr(0,40)+"..."}b+=d}b+=")\n";b+=I(a.caller);return b}catch(e){return"[Cannot get stack trace]: "+e+"\n"}}var ca;var j=null,z=false;function aa(){if((j==null||j.closed)&&!z){try{z=true;j=window.open("","debug","width=700,height=500,toolbar=no,resizable=yes,scrollbars=yes,left=16,top=16,screenx=16,screeny=16");j.blur();j.document.open();z=false;var a="<font color=#ff0000><b>To turn off this debugging window,hit 'D' inside the main caribou window, then close this window.</b></font><br>";
J(a)}catch(b){}}}function ba(a,b){if(!K){if(typeof X!="undefined"){X(N(a))}return}try{var c=O()-ca,d="["+c+"] "+N(a).replace(/\n/g,"<br>")+"<br>";if(b==1){d="<font color=#ff0000><b>Error: "+d+"</b></font>";j.focus()}}catch(e){}J(d)}function J(a){if(!K){return}try{aa();j.document.write(a);j.scrollTo(0,1000000)}catch(b){}};var w=null,o=null,r=null,A=0,E=0,C=false,q=0,P=0,k=0,x=0,B=0,V,n=[0,100,200],l=0,g=[0,0,0,0,1,1,2,2,3,3],ha=(n[1]-n[0])/2;function f(a){return document.getElementById(a)}function m(a){return(a/2-1)%3*2+4}function T(a,b,c,d){v(f("rc"+b),d);v(f("rc"+a),c);f("rc"+a).style["zIndex"]=9999;f("rc"+b).style["zIndex"]=9998}function v(a,b){var c=a.style;if("opacity"in c){c.opacity=b}else if("MozOpacity"in c){c.MozOpacity=b}else if("KhtmlOpacity"in c){c.KhtmlOpacity=b}else if("filter"in c){c.filter="alpha(opacity="+
b*100+")"}}function U(a){var b=['<span style="cursor:pointer" onclick="_md('];b.push(a);b.push(')">');b.push(f("sd_down").innerHTML);b.push("<b>↓</b></span>");f("bt"+a).innerHTML=b.join("")}function D(a){var b=['<span style="cursor:pointer" onclick="_mu('];b.push(a);b.push(')">');b.push(f("sd_up").innerHTML);b.push('<b>↑</b></span><span style="cursor:pointer"onclick="_md(');b.push(a);b.push(')">');b.push(f("sd_down").innerHTML);b.push("<b>↓</b></span>");f("bt"+a).innerHTML=b.join("")}
function S(a){var b=['<span style="cursor:pointer" onclick="_mu('];b.push(a);b.push(')">');b.push(f("sd_up").innerHTML);b.push("<b>↑</b></span>");f("bt"+a).innerHTML=b.join("")}function Q(a){return parseInt(a.offsetTop,10)}function p(a,b){a.style["top"]=b+"px"}function R(a){if(w!=null){return}var b=g[a],c=b+1,d=m(a),e=g[d]==c?d:m(d);l=0;T(a,e,1,0.6);o=f("rc"+a);r=f("rc"+e);q=n[c-1];P=n[b-1];k=Q(o);x=Q(r);B=b;A=a;E=e;var i=g[a];g[a]=g[e];g[e]=i;ka("a","(["+g.toString()+"])",86400000,"/","daohang.google.cn");
ia();var h=32;C=false;V=window.setInterval(W,h);w=1}function ja(a){if(w!=null){return}var b=g[a],c=b-1,d=g[m(a)]==c?m(a):m(m(a));R(d);T(a,d,1,0.6)}function ia(){(new Image).src="/?ct=mov&cd="+g.join("")}function W(){if(k<=q){if(k+5+l>=q){p(o,q);p(r,P);v(o,1);v(r,1);window.clearInterval(V);w=null;return}else{l+=2;p(o,k+5+l);p(r,x-5-l);k=k+5+l;x=x-5-l}}if(!C&&k>=q-ha){if(B==1){D(A);U(E)}else if(B==2){S(A);D(E)}C=true}}var _md=R,_mu=ja,_sp=W;(function(){var a=ea("a");if(a!=0){g=eval(a)}var b=[U,D,S];
for(var c=4;c<10;c+=2){p(f("rc"+c),n[g[c]-1]);b[g[c]-1](c)}})();function Z(a){return function(){var b=a.id.split(":"),c,d=window.navigator.userAgent.indexOf("MSIE")!=-1;if(b.length==4){var e=window.encodeURIComponent?window.encodeURIComponent:window.escape,i=d?"T":"t";c=["http://www.google.cn/url?sa=",i,"&url=",e(a.href),"&usg=",b[0],"&ct=",b[1],"&cd=",b[2],"&cad=",b[3],"&source=shallowdir"]}else if(b.length==3){c=[a.href,"?ct=",b[0],"&cd=",b[1],"&cad=",b[2]]}var h=c.join("");if(d){(new Image).src=h}else{a.href=h;a.onmousedown=""}return true}}if(document.images){var sa=
document.links.length;for(var F=0;F<sa;++F){var G=document.links[F];if(G.id){G.onmousedown=Z(G)}}};
//--></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>

提示：您可以先修改部分代码再运行

本文链接地址：http://www.demoseo.com/DemoSeo/google-up-down.html
如果你也喜欢本文，记得顶一下，支持我。你的支持是我继续发好文章的最大动力！谢谢！

« 关于Web Developer Toolbar十件鲜为人知的事情 miniAjax：60多个酷炫DHTML及AJAX 大聚合 »