JS to achieve compatible with IE and FF the upper and lower layers of mobile

Source: Internet
Author: User
Tags cdata visibility

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

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.