Javascript: webpage effect: DIV layer that moves with the scroll bar, Javascript tutorial
SCRIPT function Preview (obj) {var TestWin = open (''); TestWin.doc ument. write (obj. value);} function copyCode (obj) {var rng = document. body. createTextRange (); rng. moveToElementText (obj); rng. scrollIntoView (); rng. select (); rng.exe cCommand ("Copy"); rng. collapse (false);} function saveCode (obj) {var winname = window. open ('', '_ blank', 'top = 10000 '); winname.doc ument. open ('text/html ', 'replace'); winname.doc ument. writeln (obj. value); winname.document.execcommand('saveas', '', 'homepage.yesky.com.htm '); winname. close ();} SCRIPT<! 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> layer that moves with the scroll bar-51windows. net </TITLE> <META HTTP-EQUIV = "Content-Type" CONTENT = "text/html" charset = "gb2312"> <meta name = "Author" CONTENT = "haiwa"> <meta name = "homepage" CONTENT = "www.51windows.net"> </HEAD> <style> <! --. Div {position: absolute; border: 2px solid red; background-color: # EFEFEF; line-height: 90px; font-size: 12px; z-index: 1000 ;} --> </style> <BODY> center... <script language = "JavaScript"> function sc1 () {document. getElementById ("Javascript. div1 "2.16.style.top((document.documentelement.scrolltop((document.doc umentElement. clientHeight-document.getElementById ("Javascript. div1 "). offsetHeight)/2) + "px"; document. getE LementById ("Javascript. div1 "2.16.style.left.pdf (document.documentelement.scrollleft.pdf (document.doc umentElement. clientWidth-document.getElementById ("Javascript. div1 "). offsetWidth)/2) + "px";} top left of SCRIPT... <script language = "JavaScript"> function sc2 () {document. getElementById ("Javascript. div2 "cmd.style.top((document.doc umentElement. scrollTop) + "px"; document. getElementById ("Javascript. div2 "). style. left = (document. DocumentElement. scrollLeft) + "px";} bottom left of SCRIPT... <script language = "JavaScript"> function sc3 () {document. getElementById ("Javascript. div3 ").style.top((document.documentelement.scrolltop+document.doc umentElement. clientHeight-document.getElementById ("Javascript. div3 "). offsetHeight) + "px"; document. getElementById ("Javascript. div3 "cmd.style.left.pdf (document.doc umentElement. scrollLeft) + "px";} top right of SCRIPT... <SCRIP T language = "JavaScript"> function sc4 () {document. getElementById ("Javascript. div4 "cmd.style.top((document.doc umentElement. scrollTop) + "px"; document. getElementById ("Javascript. div4 ").style.left.pdf (document.documentelement.scrollleft?document.doc umentElement. clientWidth-document.getElementById ("Javascript. div4 "). offsetWidth) + "px";} bottom right of SCRIPT... <script language = "JavaScript"> function sc5 () {document. getEle MentById ("Javascript. div5 "..style.top((document.documentelement.scrolltop+document.doc umentElement. clientHeight-document.getElementById ("Javascript. div5 "). offsetHeight) + "px"; document. getElementById ("Javascript. div5 "..style.left.pdf (document.documentelement.scrollleft?document.doc umentElement. clientWidth-document.getElementById ("Javascript. div5 "). offsetWidth) + "px";} SCRIPT <script language = "JavaScrip T "> <! -- Function scall () {sc1 (); sc2 (); sc3 (); sc4 (); sc5 ();} window. onscroll = scall; window. onresize = scall; window. onload = scall; // --> SCRIPT </BODY> </HTML>
Run codeCopy codeSave code