您的位置: 首页  >  IT文章  >  随滚动条搬动的层

随滚动条搬动的层

分类: IT文章 • 2023-10-28 14:09:46
随滚动条移动的层
  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 >
  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 >
  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 >
  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 >
  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 >
  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 >

相关推荐