js元素上下移動效果程式碼例項

antzone發表於2017-04-07
JS

本章節分享一段程式碼例項，它實現了點選相關按鈕能夠實現元素上下移動的效果。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>螞蟻部落</title>
<style type="text/css">
ul{
  width:400px
}
li{
  border:1px solid gray;
  list-style:none
}
.txt{
  padding:4px;
  background-color:#ffffff
}
</style>
<script type="text/javascript">
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">softwhy.com</div></li>
  <li> 
    <div class="txt">青島市南區</div>
  </li>
  <li>
    <div class="txt">
      <i>只有努力才會有美好的未來</i>
    </div>
  </li>
  <li>
    <div class="txt">螞蟻部落歡迎您</div>
  </li>
</ul>
</body>
</html>

相關文章