Originally is a very simple function, but at the beginning of the time, there are IE can be achieved, FF is always unable to achieve, on the internet to see a half-day, also did not make a reason, so in the help of colleagues, finally out, the compatibility of the browser or the details of the above things, all about the details, I will use the notes marked out.
Here to share the project is a small demand, originally very simple, but the whole of a long time to the FF compatibility.
?
| 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 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 5, 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 11 9 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> Imitation 265 move (up, down) in the upper and lower layers support 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= ' up ↑ ', txtdown= ' move ↓ '; 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); v AR 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" > Display content 1 Display content 1 Display content 1 Display content 1 </div></li> <li> <div class= "txt" > <i> people's first, sex of the good </i> </div></li> <li > <div class= "TXT" > Display content 2<br/> Display <br/>...<br /> Display Content 2! </div></li> </ul> </body> </html> |
The above mentioned is the entire content of this article, I hope you can enjoy.
Note < > : More Wonderful tutorials please focus on Triple programming
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
