floatdiv.js 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  1. /*任意位置浮动固定层*/
  2. /*没剑(http://regedit.cnblogs.com) 2009-03-04*/
  3. /*说明:可以让指定的层浮动到网页上的任何位置,当滚动条滚动时它会保持在当前位置不变,不会产生闪动*/
  4. /*2009-06-10修改:重新修改插件实现固定浮动层的方式,使用一个大固定层来定位
  5. /*2009-07-16修改:修正IE6下无法固定在top上的问题
  6. /*09-11-5修改:当自定义层的绝对位置时,加上top为空值时的判断
  7. 这次的方法偷自天涯新版页
  8. 经多次测试,基本上没bug~
  9. 有问题的朋友欢迎到偶的博客http://regedit.cnblogs.com上提出
  10. */
  11. /*调用:
  12. 1 无参数调用:默认浮动在右下角
  13. $("#id").floatdiv();
  14. 2 内置固定位置浮动
  15. //右下角
  16. $("#id").floatdiv("rightbottom");
  17. //左下角
  18. $("#id").floatdiv("leftbottom");
  19. //右下角
  20. $("#id").floatdiv("rightbottom");
  21. //左上角
  22. $("#id").floatdiv("lefttop");
  23. //右上角
  24. $("#id").floatdiv("righttop");
  25. //居中
  26. $("#id").floatdiv("middle");
  27. 另外新添加了四个新的固定位置方法
  28. middletop(居中置顶)、middlebottom(居中置低)、leftmiddle、rightmiddle
  29. 3 自定义位置浮动
  30. $("#id").floatdiv({left:"10px",top:"10px"});
  31. 以上参数,设置浮动层在left 10个像素,top 10个像素的位置
  32. */
  33. jQuery.fn.floatdiv=function(location){
  34. //判断浏览器版本
  35. var isIE6=false;
  36. var Sys = {};
  37. var ua = navigator.userAgent.toLowerCase();
  38. var s;
  39. (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] : 0;
  40. if(Sys.ie && Sys.ie=="6.0"){
  41. isIE6=true;
  42. }
  43. var windowWidth,windowHeight;//窗口的高和宽
  44. //取得窗口的高和宽
  45. if (self.innerHeight) {
  46. windowWidth=self.innerWidth;
  47. windowHeight=self.innerHeight;
  48. }else if (document.documentElement&&document.documentElement.clientHeight) {
  49. windowWidth=document.documentElement.clientWidth;
  50. windowHeight=document.documentElement.clientHeight;
  51. } else if (document.body) {
  52. windowWidth=document.body.clientWidth;
  53. windowHeight=document.body.clientHeight;
  54. }
  55. return this.each(function(){
  56. var loc;//层的绝对定位位置
  57. var wrap=$("<div></div>");
  58. var top=-1;
  59. if(location==undefined || location.constructor == String){
  60. switch(location){
  61. case("rightbottom")://右下角
  62. loc={right:"0px",bottom:"0px"};
  63. break;
  64. case("leftbottom")://左下角
  65. loc={left:"0px",bottom:"0px"};
  66. break;
  67. case("lefttop")://左上角
  68. loc={left:"0px",top:"0px"};
  69. top=0;
  70. break;
  71. case("righttop")://右上角
  72. loc={right:"0px",top:"0px"};
  73. top=0;
  74. break;
  75. case("middletop")://居中置顶
  76. loc={left:windowWidth/2-$(this).width()/2+"px",top:"0px"};
  77. top=0;
  78. break;
  79. case("middlebottom")://居中置低
  80. loc={left:windowWidth/2-$(this).width()/2+"px",bottom:"0px"};
  81. break;
  82. case("leftmiddle")://左边居中
  83. loc={left:"0px",top:windowHeight/2-$(this).height()/2+"px"};
  84. top=windowHeight/2-$(this).height()/2;
  85. break;
  86. case("rightmiddle")://右边居中
  87. loc={right:"0px",top:windowHeight/2-$(this).height()/2+"px"};
  88. top=windowHeight/2-$(this).height()/2;
  89. break;
  90. case("middle")://居中
  91. var l=0;//居左
  92. var t=0;//居上
  93. l=windowWidth/2-$(this).width()/2;
  94. t=windowHeight/2-$(this).height()/2;
  95. top=t;
  96. loc={left:l+"px",top:t+"px"};
  97. break;
  98. default://默认为右下角
  99. location="rightbottom";
  100. loc={right:"0px",bottom:"0px"};
  101. break;
  102. }
  103. }else{
  104. loc=location;
  105. //alert(loc.bottom);
  106. var str=loc.top;
  107. //09-11-5修改:加上top为空值时的判断
  108. if (typeof(str)!= 'undefined'){
  109. str=str.replace("px","");
  110. top=str;
  111. }
  112. }
  113. /*fied ie6 css hack*/
  114. if(isIE6){
  115. if (top>=0)
  116. {
  117. wrap=$("<div style=\"top:expression(documentElement.scrollTop+"+top+");\"></div>");
  118. }else{
  119. wrap=$("<div style=\"top:expression(documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight);\"></div>");
  120. }
  121. }
  122. $("body").append(wrap);
  123. wrap.css(loc).css({position:"fixed",
  124. z_index:"99"});
  125. if (isIE6)
  126. {
  127. wrap.css("position","absolute");
  128. //没有加这个的话,ie6使用表达式时就会发现跳动现象
  129. //至于为什么要加这个,还有为什么要加nothing.txt这个,偶也不知道,希望知道的同学可以告诉我
  130. $("body").css("background-attachment","fixed").css("background-image","url(n1othing.txt)");
  131. }
  132. //将要固定的层添加到固定层里
  133. $(this).appendTo(wrap);
  134. });
  135. };