js實現兼容IE和FF的上下層的移動

2024-05-06 16:19:11

字體：大中小

來源：轉載

供稿：網友

本來是很簡單的一個功能，可是一開始弄的時候，還有IE能實現，FF總是不能實現，在網上看了半天，也沒弄出個所以然，所以在同事的幫忙下，總算弄出來了，瀏覽器的兼容性考的還是細節上面的東西，所有關于細節的，我會用注釋標出來的。

這里給大家分享的是項目中的一個小需求，本來很簡單，可是整了好久才把FF的兼容性搞定。

<!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>

<title>仿265上下層的移動(上移,下移)支持IE、FF</title>

<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">

顯示內容1顯示內容1顯示內容1顯示內容1

</div></li>

<li>

<div class="txt">

<i>人之初，性本善</i>

</div></li>

<li>

<div class="txt">

顯示內容2<br />顯示<br />...<br />顯示內容2！

</div></li>

</ul>

</body>

</html>