济南网页设计|自助建站济南网站建设|聊城网站建设济南网站制作|济南网站优化 http://www.mzwkj.com www.tuanqv.com

随滚动条移动的层

 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >   
  2. < html xmlns = "http://www.w3.org/1999/xhtml" >   
  3. < HEAD >   
  4. < TITLE > 随滚动条移动的层 </ TITLE >   
  5. < META HTTP-EQUIV = "Content-Type" CONTENT = "text/html" charset = "gb2312" >   
  6. < META NAME = "Author" CONTENT = "haiwa" >   
  7. < META NAME = "homepage" CONTENT = "www.chinaz.com" >   
  8. </ HEAD >   
  9. < style >   
  10. <!--   
  11. .div{   
  12. position: absolute;   
  13. border: 2px solid red;   
  14. background-color: #EFEFEF;   
  15. line-height:90px;   
  16. font-size:12px;   
  17. z-index:1000;   
  18. }   
  19. -- >   
  20. </ style >   
  21. < BODY >   
  22. < div id = "Javascript.Div1" class = "div" style = "width: 240px; height:90px" align = "center" > 正中... </ div >   
  23. < SCRIPT LANGUAGE = "JavaScript" >   
  24. function sc1(){   
  25. document.getElementById("Javascript.Div1") .style.top =(document.documentElement.scrollTop+(document.documentElement.clientHeight-document.getElementById("Javascript.Div1").offsetHeight)/2)+"px";   
  26. document.getElementById("Javascript.Div1") .style.left =(document.documentElement.scrollLeft+(document.documentElement.clientWidth-document.getElementById("Javascript.Div1").offsetWidth)/2)+"px";   
  27. }   
  28. </ SCRIPT >   
  29.   
  30.   
  31. < div id = "Javascript.Div2" class = "div" style = "width: 240px; height:90px" align = "center" > 左上... </ div >   
  32. < SCRIPT LANGUAGE = "JavaScript" >   
  33. function sc2(){   
  34. document.getElementById("Javascript.Div2") .style.top =(document.documentElement.scrollTop)+"px";   
  35. document.getElementById("Javascript.Div2") .style.left =(document.documentElement.scrollLeft)+"px";   
  36. }   
  37. </ SCRIPT >   
  38.   
  39. < div id = "Javascript.Div3" class = "div" style = "width: 240px; height:90px" align = "center" > 左下... </ div >   
  40. < SCRIPT LANGUAGE = "JavaScript" >   
  41. function sc3(){   
  42. document.getElementById("Javascript.Div3") .style.top =(document.documentElement.scrollTop+document.documentElement.clientHeight-document.getElementById("Javascript.Div3").offsetHeight)+"px";   
  43. document.getElementById("Javascript.Div3") .style.left =(document.documentElement.scrollLeft)+"px";   
  44. }   
  45. </ SCRIPT >   
  46.   
  47. < div id = "Javascript.Div4" class = "div" style = "width: 240px; height:90px" align = "center" > 右上... </ div >   
  48. < SCRIPT LANGUAGE = "JavaScript" >   
  49. function sc4(){   
  50. document.getElementById("Javascript.Div4") .style.top =(document.documentElement.scrollTop)+"px";   
  51. document.getElementById("Javascript.Div4") .style.left =(document.documentElement.scrollLeft+document.documentElement.clientWidth-document.getElementById("Javascript.Div4").offsetWidth)+"px";   
  52. }   
  53. </ SCRIPT >   
  54.   
  55. < div id = "Javascript.Div5" class = "div" style = "width: 240px; height:90px" align = "center" > 右下... </ div >   
  56. < SCRIPT LANGUAGE = "JavaScript" >   
  57. function sc5(){   
  58. document.getElementById("Javascript.Div5") .style.top =(document.documentElement.scrollTop+document.documentElement.clientHeight-document.getElementById("Javascript.Div5").offsetHeight)+"px";   
  59. document.getElementById("Javascript.Div5") .style.left =(document.documentElement.scrollLeft+document.documentElement.clientWidth-document.getElementById("Javascript.Div5").offsetWidth)+"px";   
  60. }   
  61. </ SCRIPT >   
  62.   
  63.   
  64. < SCRIPT LANGUAGE = "JavaScript" >   
  65. <!--   
  66. function scall(){   
  67. sc1();sc2();sc3();sc4();sc5();   
  68. }   
  69. window.onscroll = scall ;   
  70. window.onresize = scall ;   
  71. window.onload = scall ;   
  72. //-- >   
  73. </ SCRIPT >   
  74. < div style = "position: absolute; top: 0px; left: 0px; width: 10000px; height: 4000px;" > </ div >   
  75. </ BODY >   
  76. </ HTML >  

posted on 2009-08-20 15:55  路大侠  阅读(103)  评论(0)    收藏  举报

导航

济南户外拓展|企业户外拓展 http://www.tuanqv.com