本来是很简单的一个功能，可是一开始弄的时候，还有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> <li> <div><h2>Hello<br />baby</h2></div></li> <li> <div> 显示内容1显示内容1显示内容1显示内容1 </div></li> <li> <div> <i>人之初，性本善</i> </div></li> <li> <div> 显示内容2<br />显示<br />...<br />显示内容2！ </div></li> </ul> </body> </html>
以上所述就是本文的全部内容了，希望大家能够喜欢。
您可能感兴趣的文章: