js实现兼容IE和FF的上下层的移动

时间：2021-05-26

这里给大家分享的是项目中的一个小需求，本来很简单，可是整了好久才把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">ul{width:400px}li{border:1px solid gray;list-style:none}.txt{padding:4px;background-color:#ffffff}</style><script language="javascript" type="text/javascript">//<![CDATAwindow.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='上移↑&nbsp;',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>

以上所述就是本文的全部内容了，希望大家能够喜欢。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章