萬盛學電腦網 >> 腳本專題 >> javascript >> js實現兼容IE和FF的上下層的移動
js實現兼容IE和FF的上下層的移動
本來是很簡單的一個功能，可是一開始弄的時候，還有IE能實現，FF總是不能實現，在網上看了半天，也沒弄出個所以然，所以在同事的幫忙下，總算弄出來了，浏覽器的兼容性考的還是細節上面的東西，所有關於細節的，我會用注釋標出來的。
這裡給大家分享的是項目中的一個小需求，本來很簡單，可是整了好久才把FF的兼容性搞定。
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 <!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>以上所述就是本文的全部內容了，希望大家能夠喜歡。
注< >：更多精彩教程請關注三聯編程
javascript排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved